application-nodeJs

Creating One Application with Node Js and Express. Add a Router and Bootstrap 5 for Backend and Front-end.

Reference Project: Fazt

Fazt & Fazt Code

Fazt;

Fazt_Code;

Tools Project Code && Design

Express

Express Js

express

npm init

npm install express --save

npm install express

entry point: (index.js)

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Embedded JavaScript templates

Embedded JavaScript templates (ejs)

ejs_npm

npm install ejs

Example

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Basic usage

let template = ejs.compile(str, options);
template(data);
// => Rendered HTML string

ejs.render(str, data, options);
// => Rendered HTML string

ejs.renderFile(filename, data, options, function(err, str){
    // str => Rendered HTML string
});

Nodemon (Node Js)

Nodemon Install

nodemon

npm install -g nodemon

npm install --save-dev nodemon

Nodemon Documentation

nodemon_gitHub

Morgan NPM

NPM Morgan

morgan_npm

npm i morgan

var morgan = require('morgan')

morgan(function (tokens, req, res) {
  return [
    tokens.method(req, res),
    tokens.url(req, res),
    tokens.status(req, res),
    tokens.res(req, res, 'content-length'), '-',
    tokens['response-time'](req, res), 'ms'
  ].join(' ')
})

Bootstrap

Bootstrap

Build fast, responsive sites with Bootstrap

npm i bootstrap@5.3.0-alpha1

CDN Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" </script>

CDN (Content Delivery Network)

CDN Js

CDNjS

Google FONTS

Fonts

Google_Fonts

GitIgnore

GitIgnore.io

gitignore.io

Project: Application With Node Js

Index With Express

//** === Express === (Type: module) */
//const express =  require(`express`);
//import ejs from `ejs`;
import express from 'express';
//** === Add Routing Absolute */
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';

//** ===  Call Router === */
import router from './routes/index.js';

//**! App === */
const app = express();
//**! PORT === */
const port = process.env.port || 3000;

//**? === EJS / View Engine & Extend HTML & Rout View */
const __dirname = dirname(fileURLToPath(import.meta.url));
//const __dirname = path.dirname(new URL(import.meta.url).pathname);
//console.log(join(__dirname, `views`));

app.set(`views`, join(__dirname, `views`));
app.set(`view engine`, `ejs`);

//**! Routing === > Router */
/* app.get(`/`, (req, res) => {
  res.send(`Hello World!!`);
}); */
app.use(router);
//** === CSS */
app.use(express.static(join(__dirname, `public`)));

//**! Listen === */
app.listen(port, () => {
  console.log(`Server is running in Port: http://localhost:${port}`);
});

Router

import { Router } from 'express';
//** === app === router */
const router = Router();

router.get(`/`, (req, res) => {
  res.render(`index`, { title: `Home | First Website with Node` });
});
router.get(`/about`, (req, res) => {
  res.render(`about`, { title: `About | About Me` });
});
router.get(`/contact`, (req, res) => {
  res.render(`contact`, { title: `Contact | Company Contact` });
});

//** === Export === */
export default router;

Home Application

About Application

Contact Application

Mobile Project

Home Mobile

About Mobile

Contact Mobile

Deploy GitHub Pages

GiHub Pages

gitHub_pages

Npm Instal

npm i gh-pages

npm install gh-pages --save-dev

Script

"scripts": {
  "deploy": "gh-pages -d dist"
}

npm run deploy

Pages Application

application_node