How to Start a Nodejs App with Express

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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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

What Next?

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!

Leave a Reply

Your email address will not be published. Required fields are marked *