Build a Web App with Node.js and Express

• A programming language provides basic programming functionality like creating and working with objects, arrays, functions, etc.
• A Web framework is software designed to support a web application. 
• Rather than coding the whole site by hand a web framework sets up most of the functionality for you. The framework has lots of code that operates behind the scenes. 
• The framework will have an API with methods you can call in your code. You just need to know what methods to call, and what they do, without having to know all the details of how they work. 
• You can add in other third-party software packages to do specialized activities like interacting with a database. 
• Most of the popular frameworks are free and open sourced which means teams of volunteers maintain it.
• Popularity of a framework is critical because the more popular a frameworks is the more likely there will be high quality third party packages available to use in your app.

• For most web apps you can use the programming language and framework you are most comfortable with. Some of the most popular include JavaScript with Node and Express, Ruby and Rails (aka Ruby on Rails), Java and Spring, Python and Django, PHP and Laravel, and Microsoft's ASP.NET.

• Node.js: In 2009, Node.js was released allowing users to run JavaScript on servers. Node took the JavaScript engine software from the Chrome browser and added its own modules to interact with the server's operating system and the internet. For a solo developer this means you can program your entire website, front-end and back-end, using one programming language: JavaScript. 
• Npm: Node.js comes with a package manager called npm (Node Package Manager) that lets you install third party software packages directly in your application. Npm packages are either entirely coded in JavaScript or have a JavaScript interface. A list of all the available npm packages is at: npmjs.com
• Express: Express is the most popular web framework available as an npm package. 
• It is light-weight which means it doesn't add a lot of software overhead and is very flexible. 
• It is not highly opinionated which means common features can be set up many different ways. That much flexibility has its own upsides and downsides. The biggest upside is you are more in control of how your app functions. And there is less "voodoo" going on behind the scenes. 
• The express website lists the API methods available: expressjs.com
• Other npm packages: You will usually use multiple npm packages in your web app in addition to Express. We will be using the Sequelize and Sqlite3 packages to create and interact with a database.

Express Generator:

• Let's get started. Fortunately Express has a program called express-generator that will build a skeleton web application for us.
• Open your Terminal application and cd to the directory you want to put the web project in.
• Decide on a name for the application. We'll call it express-blog-app. 
• Run the command: npx express-generator express-blog-app --view=ejs
• This will create a directory called express-blog-app with some directories and files that create a very simple web application. 
• The npx command runs an npm package without installing it on your computer. 
• The --view=ejs option tells Express what templating engine we want to use. We will use EJS. 
• Open the express-blog-app project with VS Code. 
• Click the Terminal menu and select New Terminal to open a new terminal window.
• Express generator does not install any of the packages we need in our project so we need to install them. The npm packages used in our projects are called "dependencies". In the terminal enter: npm install
• Now we can run our development server: npm start 
• Open a browser tab and go to: http://localhost/3000
• You should see a simple web page that says "Welcome to Express".

• Congratulations, you have a working web application using Node.js and Express. Now lets take a quick look at the directories and files and what they do.

├── package.json
├── node_packages...
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── bin
│   └── www
├── app.js
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="/images/blog-favicon.png" rel="icon" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet' href='/stylesheets/style.css'>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/">Blog App</a>
      </div>
    </nav>
    <main class="container mb-4">

    </main>
  </body>
</html>

<%- include('header') %>

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

<%- include('footer') %>

├── config
│   └── config.json
├── migrations
├── models
│   └── index.js
└── seeders

• The config.json file is set up to interface with a MySQL database. Change it to interface with an SQLite database by replacing the code in the file with the below. This will create the database in a file called database.sqlite3.

config/config.json

{
  "development": {
    "dialect": "sqlite",
    "storage": "./database.sqlite3"
  }
}

• Now generate a data model named Article. To add fields include the --attributes option and list the field names paired with the data type. Every database has its own set of data types. Add fields named title and content with data types string and text. The string data type is for a short line of text while the text data type is for text that is more than one line.
• npx sequelize-cli model:generate --name Article --attributes title:string,content:text 

• This creates two files.

├── migrations
│   └── timestamp-create-article.js
└── models
    └── article.js

• Run another sequelize command to create the database and add the articles table.
• npx sequelize-cli db:migrate

Add the Blog ejs files and routes

• Add the form file to create a new blog post called create.ejs. Put it in the views folder.

views/create.ejs

<%- include('header') %>

<h1>Create Article</h1>
<hr>

<form method="POST" action="">
  <div class="mb-3">
    <label for="title" class="form-label">Title</label>
    <input type="text" id="title" name="title" class="form-control" maxlength="200" required>
  </div>
  <div class="mb-3">
    <label for="content" class="form-label">Content</label>
    <textarea id="content" name="content" rows="10" class="form-control" required></textarea>
  </div>

  <button type="submit" class="btn btn-secondary mt-3">Submit</button>
</form>

<%- include('footer') %>

• Change the index.ejs file to show a list of all the articles.

views/index.ejs

<%- include('header') %>

<h1 class='mb-4'>
  Articles
  <a href='/create' class='btn btn-outline-secondary float-end'>
  Create new article</a>
</h1>
<ul class="list-group">
  <% articles.forEach((article) => { %>
    <li class="list-group-item">
      <a href="/<%= article.id %>"><%= article.title %></a>
      <small>
        (Date <%= article.createdAt.toLocaleString("en-US",
        { month: 'short', day: 'numeric', year: 'numeric' }); %>)
      </small>
    </li>
  <% }); %>
</ul>

<%- include('footer') %>

• Create a file called detail.ejs that displays a specific article. 
• It has buttons to update or delete the article.
• The database creates a file called createAt that stores the date the record was created. We display the date on the detail page.

views/detail.ejs

<%- include('header') %>

<h1>
  <%= article.title %>
  <a href="/<%= article.id %>/delete" class="btn btn-outline-danger float-end ms-2">Delete</a>
  <a href="/<%= article.id %>/update" class='btn btn-outline-secondary float-end'>Edit</a>
</h1>
<p>
  <strong>Date:</strong>
  <%= article.updatedAt.toLocaleString("en-US", 
   { month: 'long', day: 'numeric', year: 'numeric' }); %>
</p>

<hr class='mt-2'>

<div style="white-space: pre-line">
  <%= article.content %>
</div>

<%- include('footer') %>

• Create a file called update.ejs that displays a form to edit a specific article. It displays the existing content in the title and content fields.

views/update.ejs

<%- include('header') %>

<h1>Update Article</h1>
<hr>

<form method="POST" action="">
  <div class="mb-3">
    <label for="title" class="form-label">Title</label><br>
    <input type="text" id="title" name="title" class="form-control"
        value="<%= article.title %>" 
        maxlength="200" required>
  </div>

  <div class="mb-3">
    <label for="content" class="form-label">Content</label><br>
    <textarea id="content" name="content" rows="10" class="form-control" 
    required><%= article.content %></textarea>
  </div>

  <div class="mb-3">
    <button type="submit" class="btn btn-secondary">Submit</button>
    <a href="/<%= article.id %>" class="btn btn-outline-secondary float-end">Cancel</a>
  </div>
</form>

<%- include('footer') %>

• The root route "/" calls the list handler function that displays the article title and createdAt field values.
• The "/create" route calls the createForm handler function which sends the create form as the response.
• The "/create" post route calls the create handler function which posts the form data to the database and redirects to the "/:id" route which will display the detail page.
• The "/:id" route calls the detail handler function which sends the article detail page as the response. :id is a variable for the article id number. 
• The "/:id/update" route calls the updateForm handler function which gets the article data from the database and sends the update form as the response.
• The "/:id/update" post route calls the update handler function which posts the form data to the database and redirects to the "/:id" route which will display the detail page.
• The "/:id/delete" route calls the destroy handler function which deletes the article from the database and redirects to the "/" root route which will display the list of articles.

routes/index.js

const express = require('express');
const router = express.Router();
const { Article } = require('../models');
const createError = require('http-errors');
 
// Routes
router.get('/', list);
router.get('/create', createForm);
router.post('/create', create);
router.get('/:id', detail);
router.get('/:id/update', updateForm);
router.post('/:id/update', update);
router.get('/:id/delete', destroy);

// Controller Functions
// GET /articles
async function list(req, res, next) {
  const articles = await Article.findAll({ 
    attributes: ['id', 'title', 'createdAt'],
    order: [['createdAt', 'DESC']]
  })
  res.render('index', { title: 'Blog App', articles });
}

// GET /articles/:id
async function detail(req, res, next) { 
  const article = await Article.findByPk(req.params.id);
  if (!article) {
    return next(createError(404));
  }
  res.render('detail', { title: 'Article', article });    
}

// GET /articles/create
function createForm(req, res, next) {
  res.render('create', { title: 'Create Article' });
}

// POST /articles/create
async function create(req, res, next) {
  const article = await Article.create(req.body, {fields: ['title', 'content'] });
  res.redirect(`/${article.id}`);    
}

// GET /articles/:id/update
async function updateForm(req, res, next) { 
  const article = await Article.findByPk(req.params.id);
  res.render('update', { title: 'Update Article', article });    
}

// POST /articles/:id/update
async function update(req, res, next) {
  const id = req.params.id; 
  await Article.update(req.body, {where: {id: id}, fields: ['title', 'content'] });
  res.redirect(`/${id}`); 
} 

// GET /articles/:id/delete
async function destroy(req, res, next) {
  await Article.destroy({where: {id: req.params.id}});
  res.redirect('/');   
}

module.exports = router;

• We are done with our Blog app. Let's try it out. 
• Stop the server from the Terminal by pressing Control+C
• Then restart it: npm start
• View the changes in the web browser: http://localhost:3000.
• To fill in the form content you can use lorem ipsum filler text. There is a website that you can use to generate it: loremipsum.io