Setting up a fresh JavaScript Project with dotenv
This guide explains how to set up a new project directory for working with example JavaScript code
Last updated
This guide explains how to set up a new project directory for working with example JavaScript code
Last updated
If you are installing Node.js on WSL, you can follow this guide.
Official releases of Node.js can be downloaded from the official site.
Once the installation is complete, or if you already have Node.js installed, type the command node -v
inside a terminal window (such as bash
, zsh
, cmd.exe
or PowerShell) to check the currently installed version.
Most modern JavaScript APIs will target Node.js v12+. Using a version manager such as nvm or fnm is strongly encouraged, as it allows developers to quickly switch between Node.js versions as needed.
These commands accomplish the following :
mkdir
creates our project directory, the directory name can be changed to anything suitable - it does not need to remain samplecode
.
The cd
command changes into the newly created directory (making it the working directory).
Run the node package manager - npm
, optionally with the -y
flag to skip the prompts and generate a default package.json
.
Install the dotenv package, which will allow us to access environmental variables in our code. Assuming no errors during the installation of dotenv, the project directory will now contain these files and directories in the following structure :
Since we used the --save
flag when installing, it will be much easier to see which dependencies are installed by looking inside the package.json
:
For anybody unfamiliar with environment variables, refer to our guide on dotenv and .env at this point to understand the package and what it is used for.
If we are choosing to use the more modern ES6 import
syntax, when developing we will need
to add a line to our package.json
in order to prevent aSyntaxError: Cannot use import statement outside a module
.
The import
keyword was introduced in Node.js v12, a language feature to simplify the use of modules. Alternatively, we could use an .mjs
file extension for all of our JavaScript files, however adding this line to package.json
enables us to keep the .js
file extension and saves a lot of hassle with configuration :
If we are choosing to use the older, slightly more common require()
syntax, then it is unnecessary to add this line to package.json
.
With these steps completed, we now have a project directory that is prepared to have other dependencies installed into it using npm install
or yarn add
.
This basic setup is a sufficient start to be able to write and execute further JavaScript code using Node.js, the next step being to install whichever dependencies we would like to learn about. This is a good way to experiment and become familiar with particular JavaScript libraries.