express-starter.md

Express Starter Kit

2022-01-15

A quick interlude that may never end in the sequelize notes. This is a set of snippets that I copy and paste for each of my node projects.

I start off with using express to generate the directory structure and I use ejs for the views.

> express --view=ejs projectName

I delete the files in the public folder as I have my own names for them that I prefer.

> rm -rf public
> mkdir public
> mkdir public/css
> mkdir public/js

I then delete the templates that come by default.

> rm views/*

Also delete the user route.

> rm routes/user.js

Next step is to do an npm install.

> npm install

Next, I need to install some packages that I would like:

> npm install dotenv hpp helmet method-override csurf

I also use nodemon during development but I have that installed globally so we just need to add a start-dev script to package.json:

  "scripts": {
    "start": "node ./bin/www",
    "start-dev": "nodemon ./bin/www"
  },

Now we can update app.js to include these packages.

require('dotenv').config()
var express = require('express');
var methodOverride = require('method-override');
var helmet = require('helmet');
var hpp = require('hpp');

Next we set up helmet and hpp, and change the delimiter for ejs.

app.use(helmet({referrerPolicy: { policy: "same-origin" }}));
app.use(hpp());

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('view options', {
    delimiter: '?',
});

Next, we need to set up the method-override package:

app.use(methodOverride(function (req, res) {
    if (req.body && typeof req.body === 'object' && '_method' in req.body) {
        var method = req.body._method
        delete req.body._method
        return method
    }
}))

Lastly, we need to set up the error handler.

// error handler
app.use(async function(err, req, res, next) {
    if (process.env.ENV !== "production") {
        console.log(err);
    }
    return res.render('404');
});

The .env file:

ENV="DEV"
PORT=6000
SECRET="secret"

The .gitignore:

node_modules/
.env

Now, for the views, I like to have a meta file, header file, footer file, a base and a 404.

The meta file:

<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
<!-- maximum scale so that it doesn't zoom in when typing on phone -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<? if (locals.title) { ?>
    <title><?= title ?></title>
<? } else { ?>
    <title>new project</title>
<? } ?>

<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="/static/css/style.css">

Some blank header and footer files:

> touch views/header.ejs
> touch views/footer.ejs

The base:

<!doctype html>
<html lang="en">
    <head>
        <?- include('meta'); ?>
    </head>
    <body>
            <?- include('header'); ?>
            <?- include('footer'); ?>
        </div>
    </body>
</html>

The 404:

<!doctype html>
<html lang="en">
    <head>
        <?- include('meta'); ?>
    </head>
    <body>
        <?- include('header'); ?>
        <div>
            <i>Sorry, something has gone wrong.</i>
        </div>
        <?- include('footer'); ?>
        </div>
    </body>
</html>

I also create a css file:

> touch public/css/style.css

To set up auth:

https://nivethan.dev/devlog/setting-up-authentication-in-node.html

This is all some basic stuff that I often have to do. I’ll update this as time goes on.