How to Start a Nodejs App with Express
Creating a new Directory and create a file called index.js
Start the APP
npm init -y node index.js
Install Express JS and set the PORT
npm install express
Important features to take note of is the addition to the package.json file once you install express. If it was done successfully, you will see this included in your file.
You should also should have a package-lock.json file along with the node_modules folder. The node modules folder contains hundreds of resource files that make up the Nodejs Architecture.
const express = require('express') const app = express()
Add the code to your index.js file
Define your PORT
const PORT = process.env.PORT || 5000;
Tell app to listen on the const PORT variable
app.listen(PORT, () => console.log("Server Listening on port " + PORT ))
If it is working, you will see the log displaying that we have set the port on 5000.
Building the First Webpage
create a new folder, this example will name the file public, however the name doesn’t particularly matter. Inside the folder, create a file and name it index.html and copy the following code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://email@example.com/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://firstname.lastname@example.org/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
This is the Bootstrap starter template, found here.
Now we need to create a path and a route.
const path = require('path'); // Set static folder app.use(express.static(path.join(__dirname, 'public')));
Run terminal command: node index.js
Go to your localhost:5000
If you add another html file within the public folder we created, Express will automatically rout that to the new page. By adding localhost:5000/about.html you will automatically be routed to the new page which is rather cool. Take a look.
As far as creating a simple static website, it’s rather fast and easy. If you are looking to create something a little more advanced than just a static website, here are a few more things you should set up to make your project easier to work with.
Set up Nodemon
This program will restart the server for you whenever you make a change to your index.js file. This will save you time so you do not have to constantly do this yourself.
npm install -D nodemon
Make a few adjustments to your package.json file:
Moving forward the terminal command will change from node index.js to npm run dev
Now, every time you make a change to the index.js file, you only have to reload the page and not restart the server.
npm run dev
Now that you have the simple application set up with Nodejs and Express, you can start working on building your website and adding more complex components, routing, ect. using all of the fun tools provided in the Node framework.
Check out our next Node Tutorial here!