Initializing an Express Project
Initializing an Express Node.js Project
Getting Started with Express#
So far, we have only worked on the frontend part of our project. In this module, we will switch gears and create the backend part of the project, which will be an Express.js application.
Express is a Node.js web application framework that handles the common needs of a backend server-side web application. The features that we will be using include backend routing, serving static files and authentication.
Our source code is organized by frontend
and backend
directories. If you haven't already done so, create the backend
directory under the root school-lunch
directory.
$ mkdir backend
At this point, the overall project tree should look like this:
$ tree -I 'node_modules'
├── backend
└── frontend
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── build
│ │ ├── bundle.css
│ │ ├── bundle.css.map
│ │ ├── bundle.js
│ │ └── bundle.js.map
│ └── index.html
├── rollup.config.js
└── src
├── App.svelte
├── main.js
├── routes.js
└── views
├── admin
│ └── LunchMenuAdmin.svelte
└── public
├── Home.svelte
├── LunchMenuView.svelte
Next we will use express-generator
to scaffold the backend project. Change to the backend
directory and run the following:
$ cd backend
$ npx express-generator --no-view
You should see the following output:
npx: installed 10 in 1.233s
create : public/
create : public/javascripts/
create : public/images/
create : public/stylesheets/
create : public/stylesheets/style.css
create : routes/
create : routes/index.js
create : routes/users.js
create : public/index.html
create : app.js
create : package.json
create : bin/
create : bin/www
install dependencies:
$ npm install
run the app:
$ DEBUG=temp:* npm start
As you can see, the above command created several directories and files for us to initialize a small Express project.
Have a look at the package.json
file that was just created. You will see that there are a few dependencies that we need such as cookie-parser
and express
. Run npm install
to install these additional dependencies:
$ npm install
Adding Prettier and ESLint#
Just like we did on the frontend project, we can configure Prettier and ESlint for the back end and get the same benefits. In the root of the backend project, add a .prettierrc.json
file with the following rules. Feel free to customize these rules to your preference.
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
Likewise, create an .eslintrc.json
file with the following config which is needed for a Node project.
{
"env": {
"commonjs": true,
"es2020": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 11
},
"rules": {}
}
Note: Running
npx eslint --init
is another good way to initialize and configure aneslintrc.json
file. This command provides an interactive installer to set the various options.
After this, let's add the ESLint command to the start
script in package.json
. In package.json
add npx eslint ./
. You can also add a separate lint script so that you can easily run ESlint directly with an npm run
command:
"scripts": {
"start": "npx eslint ./ && node ./bin/www",
"lint": "npx eslint ./"
},
Give it a try from the command line by running npm run lint
:
$ npm run lint
> backend@0.0.0 lint /school-lunch/backend
> npx eslint ./
/school-lunch/backend/routes/index.js
5:37 error 'next' is defined but never used no-unused-vars
/school-lunch/backend/routes/users.js
5:36 error 'next' is defined but never used no-unused-vars
✖ 2 problems (2 errors, 0 warnings)
Interestingly our ESLint rules have found a no-unused-vars
problem with our auto-initialized code. Linting rules are often strict and may seem annoying at times but the end result is better quality code. Let's try to embrace the rules and be thankful for them!
The no-unused-vars
rule is simply saying that we have defined a variable or parameter in the code, but not used it. While it wouldn't actually cause a bug, our code will be more readable and maintainable if we fix this issue, which we will do in the next section.
This page is a preview of Fullstack Svelte