📄 Table of contents
➤ Include CSS and JS files in Node.js
➤ Create frontend-backend connection using JS & nodeJS.
➤ Create frontend-backend connection using React & nodeJS.
Responsive 🎧 Website using HTML CSS & Express JS in Hindi | Serve Static Website in Node JS(Express)
Template Engines (Pug, hbs, EJS) in Node JS 😍 | Add Dynamic Content in Express JS in Hindi
Customizing the Views Directory in Express JS | Dynamic Data Folder in Express in Hindi
Using Partials 😍 in Express JS in Hindi
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
◉ Create a connection between Node and JS
- create a server on local machine using expressJS framework.
. GET + fetch JSON data
- define multiple
getrequests using expressJS routes.
- fetch json data using one of the
. POST + send JSON data
- define a
postrequests using expressJS routes.
- send raw json data on button click via above
. POST + send FORM data
- send form data on submit click via above
working code can be found at:
Contribute to anil-pace/node-client_server_using_js_node development by creating an account on GitHub.
◉ Serve Static Files (Include CSS and JS files in Node.js)
I would suggest you create a
app.js file, you can add this code to make all these files available anywhere in your node.js project.
Don’t forget to include
express in your header like this:
var express = require('express');
var path = require('path');
Now you can use your CSS/JS files wherever you want like this.
<link rel='stylesheet' href='/style.css' />
Here style.css is your custom CSS file. Hope this way works fine to you.
Template Engines with Express
When we have to deal with DYNAMIC data/page content then we have to use Template engines namely (
handlebars ‘hbs’, EJS, Mustache, pug, etc) in order.
To use template engines we must have
views directory in place.
views directory is mandatory => this defaults to the view directory. however, it can be changed also using
and if you have to use template engine things then first you need to
set it using below command
// to set view engine
app.set("view engine", "hbs"); // mandatory to write in same format
◉ run both client & server simultaneously
npm install concurrently
◉ View Engines
// to send something (raw text) from expressJS to FE
res.send("send sthg to FE");// to send HTML tag from expressJS to FE
res.send("<h1> sending html tag</h1>");res.sendFile() // send file to frontend from nodejs//renders a view (when we are using render engines) in express
res.render(‘index’); # Whenever we have to send data (POST) to backend…we need to use a package body-parser .