How to integrate a Svelte page with Express?

Question

So I want to use a form in my svelte page to send emails with nodemailer. I want to integrate my svelte form with my contact.js file. I have a template contact.js file, but it uses express-handlebars to integrate with a contact.handlebars form. So instead of using handlebars, I am using svelte here. How can I integrate them??

the contact.js template:

const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const mailer = require('nodemailer');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/contact', (req, res) => {
    res.render('contact');
});

the svelte form inside contact.svelte:

<CourseWrapper {user}>
    <main>
        <h2>Contact Us</h2>
        <p>Send us a message about your questions or suggestions of any kind.</p>
        <ShadowedCard>
            <form on:submit|preventDefault={submit}>
                <InputGeneric label="Name" bind:value={name} placeholder="Enter your name" />
                <InputGeneric
                    label="Email"
                    type="email"
                    bind:value={email}
                    placeholder="Enter your email" />
                <InputGeneric label="Subject" bind:value={subject} placeholder="Enter your email subject" />
                <InputGeneric label="Feedback" type={null}>
                    <textarea bind:value={message} placeholder="Enter your message" />
                </InputGeneric>
                {#if state === 'loading'}
                    <Loader.ThreeWavyBalls />
                {:else}
                    <Button type="submit" color>Send</Button>
                {/if}
            </form>
        </ShadowedCard>
    </main>
</CourseWrapper>

I'm a newbie in node.js and svelte :( thank you in advance!

Answer 1

Instead of express-handlebars you'd need to use svelte-view-engine. You should then be able to use it as an express view engine:

const bodyParser = require('body-parser');
const svelteViewEngine = require("svelte-view-engine");
const mailer = require('nodemailer');

const app = express();

let engine = svelteViewEngine({
    env: "dev",
    template: "./template.html",
    dir: "./pages",
    type: "html",
    buildDir: "../artifacts/pages",
});
 
app.engine(engine.type, engine.render);
app.set("view engine", engine.type);
app.set("views", engine.dir);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/contact', (req, res) => {
    // pass user object to template
    res.render('contact', { user: //tbd });
});

See https://github.com/svelte-view-engine/sve-app for an example app.