This video is available to students only

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.

At this point, the overall project tree should look like this:

Next we will use express-generator to scaffold the backend project. Change to the backend directory and run the following:

You should see the following output:

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:

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.

Likewise, create an .eslintrc.json file with the following config which is needed for a Node project.

Note: Running npx eslint --init is another good way to initialize and configure an eslintrc.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:

Give it a try from the command line by running npm run lint:

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

Start a new discussion. All notification go to the author.