How to integrate a Svelte page with Express? - node.js

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!

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.

Related

why unable to display value of title?

I am trying to output the value of title which i entered in the form in the /Add-Product link
Here is my app.js code
const http= require('http');
const path= require('path');
const express= require('express');
const app= express();
app.set('view engine', 'ejs');
app.set('views', 'Views');
app.use(express.static(path.join(__dirname, 'Public')));
app.get('/', (req, res, next)=>{
res.render('shop');
});
app.get('/admin', (req, res, next)=>{
res.render('admin');
});
app.get('/add-product', (req, res, next)=>{
res.render('addProduct');
});
app.post('/add-product', (req, res, next)=>{
console.log(req.body.title); //uable to display value of req.body.title
res.redirect('/');
});
app.listen(3000);
form part of the addProduct.ejs
<main>
<form action="/add-product" method="POST">
<p>Title</p>
<input type="text" name="title" id="title"/>
<p>Price</p>
<input type="text" name="price"/>
<p>Description</p>
<input type="text" name="description"/>
<button type="submit">Submit</button>
</form>
</main>
Unable to figure why the req.body.title is throwing an error as:Cannot read property 'title' of undefined
Please guide me on what i am missing.
By default, form submits the data to server in the content type of application/x-www-form-urlencoded. So you need to configure node js to receive this type of content. Use bodyParser to read the request body with json and encoded content.
Usage:
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true }));

What is the reason req.body is displayed as undefined?

Hi i am making a blog with node js. And now I am implementing the function to write a post, but there is a problem in this process.
new.ejs is a screen for creating a post.
new.ejs
<div>
<h2> new post </h2>
<form action="/articles" method = "POST">
<h4>title</h4>
<input required type="text" name = "title" / class='form-control'><br>
<h4>description</h4>
<textarea name="description" class = 'form-control'></textarea><br>
<h4>contents</h4>
<textarea id="mytextarea" name="contents" rows = '10'></textarea>
취소<button type = "submit" class="btn btn-primary">저장</button>
</form>
</div>
and
article.js
var express = require("express");
var app = express();
var router = express.Router();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
router.get("/", function (req, res) {
res.send("article");
});
router.get("/new/home", function (req, res) {
res.render("articles/index");
});
router.get("/new", function (req, res) {
res.render("articles/new");
});
router.post("/", function (req, res) {
console.log(req.body.title);
});
module.exports = router;
Here, when req.body.title is executed, req.body becomes undefined. And in the code editor window, a sentence stating that bordyParser has been deprecated appears as the middle line is drawn. How to solve it
The EJS file is POSTing to /articles, but your POST route in the NodeJS is /.
To fix the 'body-parser is deprecated' messages, change the code as follows :-
...
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
...
to
...
app.use(express.urlencoded());
...
Body Parser is now part of Express itself.

Contact form not submitting information to Terminal

Im using express, node, bodyParser to pull information from a contact form and post it to the terminal. When I run the code and access my demo site through LocalHost:3000, upon submitting, my input items are not showing up in the terminal.
I've tried changing the form attributes action="send" action="/send" action="/"
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const nodemailer = require('nodemailer');
const app = express();
// View engine setup
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
// Static folder
app.use('/public', express.static(path.join(__dirname, 'public')));
/ Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.render('contact', { layout: false });
});
app.post('/send', (req, res) => {
console.log(res.body);
});
//Form HTML code
<form action="send" method="POST">
<input name="name" type="text" id="name" placeholder="NAME: First & Last">
<input name="email" type="text" id="email" placeholder="EMAIL:">
<textarea name="text" id="text" cols="30" rows="10" placeholder="QUESTION OR INQUIRY:"></textarea>
<br>
<button type="submit">Submit</button>
</form>
Have you tried console logging the req instead of the res for the app.post?
If you are doing console.log(req.body) then this should output a long json object. If this is not happening, then you are not hitting the url.
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const nodemailer = require('nodemailer');
const app = express();
// View engine setup
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
// Static folder
app.use('/public', express.static(path.join(__dirname, 'public')));
// Body Parser Middleware
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.render('contact', { layout: false });
});
app.post('/send', (req, res) => {
console.log(res.body);
});
The problem is in your html code. I have made some changes, Try this.
//Form HTML code
<form action="http://localhost:9000/send" method="POST">
<input name="name" type="text" id="name" placeholder="NAME: First & Last">
<input name="email" type="text" id="email" placeholder="EMAIL:">
<textarea name="text" id="text" cols="30" rows="10" placeholder="QUESTION OR INQUIRY:"></textarea>
<br>
<button type="submit">Submit</button>
</form>

how to pass variable from one ejs to another ejs in node js

I have two ejs in my views folder
I have created very simple ejs to see if I can send the variable from one ejs to another ejs.
a.ejs in veiws file
<form name="input" action="\home" method="post">
<input type='checkbox' checked>Cheese
<input type="submit" value="Submit" href="validation.ejs">
</form>
b.ejs has
<h1><% post my variable here%></h1>
in my node js this is what i did
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.render('index', { title: 'EJS Demo' });
});
app.post('/', (req, res) => {
const a = req.body.a;
res.get('index2',a);
});
app.listen(3000, () => {
console.log('Listening....');
});
i think the post has to do something in here...
I think you need to submit a value from form1 in page1 and pass that variable to page2
if thats the case you can do like this
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');
// send the page1 to the user
app.get('/', (req, res) => {
res.render('page1', { title: 'EJS Demo' });
});
//capture the submit from the user and then send another page
//to the user
app.post('/submitForm', (req, res) => {
const a = req.body.valueFromA;
res.render('page2',a);
});
app.listen(3000, () => {
console.log('Listening....');
});
<form name="input" action="\home" method="post">
<input type='checkbox' checked>Cheese
<input type="submit" value="Submit" href="validation.ejs">
</form>
<!-- page1 form1 -->
<html>
<head>
<title> <& title &> </title>
</head>
<form action='/submitForm' method='post'>
<input type='text' value='' name='valueFromA' />
<input type='submit' />
</form>
</html>
<!-- page2 ejs -->
<html>
<body>
<p> <% value %> </p>
</body>
</html>
b.ejs has
<h1><% post my variable here%></h1>
in my node js this is what i did const

Unable to post form details using Express js

My express code:
var express = require('express');
var bodyParser= require("body-parser");
var app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');
app.get('/', function(req, res){
res.render('default', {title: 'Home', users: ['a', 'b', 'c']});
});
app.post('/me', function(req, res){
res.send("2nd page");
var t1= req.body.username;
console.log(t1);
});
My template:
<form method="post" enctype="multipart/form-data" action="/me">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit">
</form>
I'm trying to print the form values in submitted page
I have not added any jQuery or anything in the head section
What's the mistake?
Problem is with your form enctype, I am using jade template system, just add "jade": "^1.6.0" in your package.json and do npm install
Server Code
var express = require('express');
var app = express();
var bodyParser= require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'jade');
app.get('/', function(req, res){
res.render('test');
});
app.post('/me', function(req, res){
console.log(req.body.username);
res.send("done");
});
app.listen(8081);
console.log("Listening at 8081");
views/test.jade
doctype html
html
form(method="post",enctype="application/x-www-form-urlencoded" action="/me")
input(type="text",name="username")
input(type="password" name="password")
input(type="submit")
if you want multipart/form-data you need to use
var multer = require('multer'); app.use(multer())

Resources