{"id":204,"date":"2022-05-03T15:12:42","date_gmt":"2022-05-03T15:12:42","guid":{"rendered":"https:\/\/felixaugenstein.com\/blog\/?p=204"},"modified":"2022-05-03T15:12:44","modified_gmt":"2022-05-03T15:12:44","slug":"set-up-express-js-in-node-js-and-build-a-small-application-with-nodemon-express-generator-and-dotenv-libraries","status":"publish","type":"post","link":"https:\/\/felixaugenstein.com\/blog\/set-up-express-js-in-node-js-and-build-a-small-application-with-nodemon-express-generator-and-dotenv-libraries\/","title":{"rendered":"Set up Express.js in Node.js and build a small application with Nodemon, express-generator, and dotenv libraries"},"content":{"rendered":"\n

In this tutorial you will set up a new Express.js application with some commonly used libraries like nodemon and dotenv.<\/p>\n\n\n\n

Let’s assume you\u2019ve already installed\u00a0Node.js<\/a>, as a next step we will create a new directory for your Express.js application.<\/p>\n\n\n\n

In a terminal type the following 2 commands:<\/p>\n\n\n\n

$ mkdir myExpressApp\n$ cd myExpressApp<\/code><\/code><\/pre>\n\n\n\n
Now type the npm init<\/code> command in your terminal to create a package.json<\/code> file for your application. For more information on package.json<\/code> works, see npm\u2019s package.json documentary<\/a>.<\/p>\n\n\n\n
\n
\n
npm init<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
This command prompts you for a number of things, such as the package name, version of your application, description, test command, git repository, etc. For now, you can simply hit RETURN to accept the defaults for most of them, with the following exception:<\/p>\n\n\n\n
entry point: (index.js)<\/code><\/pre>\n\n\n\n
Enter app.js<\/code>, or whatever you want the name of the main file to be. If you want it to be index.js<\/code>, hit RETURN to accept the suggested default file name. When asked Is this OK? (yes)<\/code> type yes<\/code>.<\/p>\n\n\n\n
Now install Express in your app directory and save it in the dependencies list. For example:<\/p>\n\n\n\n
npm install express<\/code><\/pre>\n\n\n\n
Express-generator<\/h2>\n\n\n\n
To install express-generator<\/code>, to create an application skeleton, run the following command:<\/p>\n\n\n\n
npm install -g express-generator<\/code><\/pre>\n\n\n\n
For more information take a look at npm’s express-generator documentary<\/a>.<\/p>\n\n\n\n
The express-generator<\/code> can be further configured with the following commands:<\/p>\n\n\n\n
    --version        output the version number\n-e, --ejs            add ejs engine support\n    --pug            add pug engine support\n    --hbs            add handlebars engine support\n-H, --hogan          add hogan.js engine support\n-v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)\n    --no-view        use static html instead of view engine\n-c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)\n    --git            add .gitignore\n-f, --force          force on non-empty directory\n-h, --help           output usage information<\/code><\/pre>\n\n\n\n
For the views, let’s choose ejs for this application, therefore run this command in your terminal to create the application skeleton:<\/p>\n\n\n\n
express --view=ejs<\/code><\/pre>\n\n\n\n
Now you should see the following directory structure:<\/p>\n\n\n\n
.\n\u251c\u2500\u2500 app.js\n\u251c\u2500\u2500 bin\n\u2502   \u2514\u2500\u2500 www\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 public\n\u2502   \u251c\u2500\u2500 images\n\u2502   \u251c\u2500\u2500 javascripts\n\u2502   \u2514\u2500\u2500 stylesheets\n\u2502       \u2514\u2500\u2500 style.css\n\u251c\u2500\u2500 routes\n\u2502   \u251c\u2500\u2500 index.js\n\u2502   \u2514\u2500\u2500 users.js\n\u2514\u2500\u2500 views\n    \u251c\u2500\u2500 error.ejs\n    \u2514\u2500\u2500 index.ejs\n\n7 directories, 8 files<\/code><\/pre>\n\n\n\n
Install dependencies with the npm install<\/code> command:<\/p>\n\n\n\n
npm install<\/code><\/pre>\n\n\n\n
Start your Express.js app at http:\/\/localhost:3000\/<\/code> with the npm start<\/code> command:<\/p>\n\n\n\n
npm start<\/code><\/pre>\n\n\n\n
If you wish to change the port, go to bin\/www<\/code> or you can use an environment file later in this tutorial to configure the port.<\/p>\n\n\n\n
Nodemon<\/h2>\n\n\n\n
So far, you are able to start your application by running the npm start script. The only remaining concern is that you have to restart the app every time you change it. You can change this behavior with an always-running node process. To remedy this, install the commonly used\u00a0nodemon<\/a>\u00a0library on the command line:<\/p>\n\n\n\n
npm install nodemon<\/code><\/pre>\n\n\n\n
Next, in your package.json<\/code> file add a new script, to start your app using nodemon:<\/p>\n\n\n\n
\"scripts\": {\n    \"start\": \"node .\/bin\/www\",\n    \"dev\": \"npx nodemon app.js -e js,ejs,html,css\"\n},<\/code><\/pre>\n\n\n\n
Using the script above your app will restart, whenever you save files with the specified extensions. You can now start your app with this command (instead of npm start<\/code>):<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\n
Environment variables in Node.js<\/h2>\n\n\n\n
It is crucial to set data like private API keys and user credentials like password, username, etc. as environmental variables, but without exposing them in the source code. Therefore, let’s put environment variables in a dedicated file that is safe from external access. The\u00a0.env<\/em>\u00a0file lets you set Node.js environment variables. On the command line, in your project’s root folder, create a\u00a0.env<\/em>\u00a0file:<\/p>\n\n\n\n
touch .env<\/code><\/pre>\n\n\n\n
Now you can place any key value pair that you don’t want in your source code in this new file, for instance an API key:<\/p>\n\n\n\n
API_KEY=mySecretApiKey123<\/code><\/pre>\n\n\n\n
dotenv<\/a> is another helpful library to make environmental variables accessible in the source code. First, install it on the command line as a normal dependency:<\/p>\n\n\n\n
npm install dotenv<\/code><\/pre>\n\n\n\n
Second, import it into your\u00a0app.js<\/code> or <\/em>index.js<\/code> <\/em>file to initialize it. The environment variable from your\u00a0.env<\/em>\u00a0file is now accessible in your source code.<\/p>\n\n\n\n
require('dotenv').config()\nconsole.log('My API key: ', process.env.API_KEY);<\/code><\/pre>\n\n\n\n
An even better option is to create a new module in a file named\u00a0config.js<\/code>. in the root directory of your app, next to app.js<\/code>. Then copy and paste the following code into the file:<\/p>\n\n\n\n
\/\/ config.js\nconst dotenv = require('dotenv');\ndotenv.config();\nmodule.exports = {\n  apiKey: process.env.API_KEY,\n  anotherApiKey: process.env.ANOTHER_API_KEY\n};<\/code><\/pre>\n\n\n\n
Then in your app.js file you can simply import the module and use credentials like API keys:<\/p>\n\n\n\n
\/\/ app.js\nconst { apiKey, anotherApiKey } = require(\u2018.\/config\u2019);<\/code><\/pre>\n\n\n\n
And that’s it. Now you have a running express.js application that restarts easily with nodemon, whenever you change files, and that includes the dotenv library to store your credentials safely in an environment file. <\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial you will set up a new Express.js application with some commonly used libraries like nodemon and dotenv. Let’s assume you\u2019ve already installed\u00a0Node.js, as a next step we will create a new directory for your Express.js application. In a terminal type the following 2 commands: Now type the npm […]<\/p>\n","protected":false},"author":1,"featured_media":220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,44,30],"tags":[],"class_list":["post-204","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application","category-express-js","category-node-js"],"_links":{"self":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/comments?post=204"}],"version-history":[{"count":13,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions\/219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media\/220"}],"wp:attachment":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/categories?post=204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/tags?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}