How to Deploy an Express JS Application?

Q: What are the advantages of Express.js?

User-Friendly: Express.js makes it easy to create web applications in a structured and manageable manner. Multi-Purpose: It's designed to handle a wide range of application types - from API servers to static file servers and comprehensive web apps. Strong Community: Being part of the Node.js ecosystem, it benefits from a large and active community, providing a wealth of useful middleware components.

Learn

How to Deploy an Express JS Application?

In this tutorial, we’ll guide you through deploying an Express.js application by leveraging the Containers feature of Back4App. This approach merges the efficiency of Express.js with the comprehensive hosting services provided by Back4App.

Express.js is a streamlined, adaptable web application platform built on Node.js. It is often used to develop web applications and APIs. Its distinctive features include middleware functionality, effective routing mechanisms, and compatibility with diverse template engines.

Additionally, Express.js enables seamless connections with various databases. It stands out due to its user-friendly nature, rapid performance, and customizable features, backed by a supportive, thriving community.

Contents

1 Key Takeaways
2 Prerequisites:
3 Step 1: Create an Express JS Project
4 Step 2: Run the Application
5 Step 3: Dockerize the Express JS Project
6 Step 4: Pushing the Project to GitHub
7 Step 5: Deployment of the Project to Back4app
8 Conclusion
9 FAQs
10 What is Express.js?
11 What are the advantages of Express.js?
12 How to deploy an Express.js application?

Key Takeaways

Learn to deploy an Express.js app using the comprehensive hosting services of Back4app.

Explore how Docker can package and distribute your Express.js application effectively.

Understand how to leverage GitHub and Back4app for smooth, efficient app deployment.

Prerequisites:

To follow this tutorial, you’ll need:

Node.js and npm: To obtain the latest edition of Node.js, browse the official Node.js website. It’s worth mentioning that npm is bundled together with Node.js as part of the same package.

GitHub Account: Set up an account to manage the version history of your code.

Back4app Account: Register an account on the Back4app platform to facilitate the deployment of your application.

Docker Desktop: Proceed to download and install Docker on your computer.

Visual Studio Code: This is a code editor utilized for constructing and compiling your code.

Step 1: Create an Express JS Project

Starting a new Node.js application: First, open a terminal in Visual Studio Code (or your operating system’s terminal) and navigate to the desired directory for your new application. Execute the following command to initiate a new Node.js application:

npm init -y

This will result in a new package.json file filled with default values in your directory.

Implementing Express.js: Subsequently, incorporate Express.js into your application. This is done by executing the following command:

npm install express

By running this command, the Express.js library will be installed and added as a dependency in your package.json file.

Building a new Express.js application: Create a new file within your application’s directory. You can name this file app.js, index.js, or any name you prefer. Open this file in Visual Studio Code and incorporate the following code into it:

// Import the express module
let express = require(‘express’);

// Create an express application
let server = express();

// Define the port to be used
let listeningPort = 3000;

// Define route for the root URL
server.get(‘/’, (request, response) => {
response.send(‘My First Express JS Application’);
});

// Start the application
server.listen(listeningPort, () => {
console.log(`Server is up and running at http://localhost:${listeningPort}`);
});

This code generates a basic Express.js application that responds with “My First Express JS Application” when the root URL (/) is accessed, and it listens on port 3000.

Step 2: Run the Application

After saving your app.js file, revert back to your terminal and execute the following command:

node app.js

This will initiate your Express.js server. Navigate to http://localhost:3000 in your web browser to see your application live.

Congratulations! You’ve successfully created and run a simple Express.js application on your local system.

Step 3: Dockerize the Express JS Project

Docker is a system that facilitates the packaging and distribution of your software applications. By creating a Dockerfile in your project’s root directory, you provide Docker with instructions to build an image of your application.

Here is an example of a straightforward Dockerfile for your Express.js application:

# Node serves as the runtime environment for JavaScript, hence we use it as our base image.
FROM node:20

# We set /app as the working directory within the container
WORKDIR /app

# We copy package.json and package-lock.json into the /app directory in the container
COPY package*.json ./

# The dependencies are installed in the container
RUN npm install

# The rest of the code is copied into the container
COPY . .

# Port 3000 is exposed to enable access from outside
EXPOSE 3000

# The command required to run the app is specified
CMD [ “node”, “app.js” ]

To construct the Docker image, the following command can be executed:

docker build -t my-express-app .

This command builds a Docker image using your Dockerfile and labels it (-t) as my-express-app.

To execute the Docker image, you can then use:

docker run -p 3000:3000 -d my-express-app

This command executes the Docker container in the background (-d) and maps the Docker container’s port 3000 to your machine’s port 3000 (-p 3000:3000).

You should now be able to access your Express.js app running within a Docker container at http://localhost:3000.

Replace ‘my-express-app’ with your preferred Docker image name.

Step 4: Pushing the Project to GitHub

Setting up Git: Open your terminal and navigate to your project folder. Then, initiate a new Git repository using the following command:

git init

This action sets up a new Git repository in your project directory.

Adding a project: Add your project to your Git repository using this command:

git add my-express-app

If you need to add all your project’s files to the repository, simply use ‘git add .’.

Committing the changes: Once the project is added, make a commit with a descriptive message to mark your changes. You can achieve this by using:

git commit -m “Initial commit”

Establishing a Main Branch: Git’s primary branch is typically named “master.” But you might want to switch its name to “main.” The following command will allow you to make that change:

git branch -M main

Linking to Remote Repository: The next step is to connect your local repository to the corresponding repository on GitHub. You can do this by using the URL of the GitHub repository:

git remote add origin https://github.com/naeem99k/expressjs.git

Uploading to Remote Repository: Finally, you can upload the changes you’ve committed to your GitHub repository:

git push -u origin main

After completing these steps, your local changes should be available on your GitHub repository.

Step 5: Deployment of the Project to Back4app

After successfully uploading the code, move to the Back4app Platform.

Begin the application development process using ‘Containers as a Service.’

You’ll be asked to link your GitHub account.

Follow the guidelines to connect your account and authorize Back4app to access your repositories.

You have the option to permit access to all repositories or only to certain ones you plan to deploy.

Next, click “Save” to return to your Back4app dashboard and proceed with the app configuration.

Within the Back4app “Container Apps” area, select your ‘expressjs’ repository.

Give your application a name, choose your desired branch name, and define the source directory as needed.

To deploy the Express.js application on the Back4app Container, hit the “Create App” button.

After completing the deployment task, click on your application’s link provided by the Back4app Platform.

This will lead you to the default landing page of Express.js.

The Express.js Project has now been deployed on the Back4app Containers.

Conclusion

To wrap up, the process of deploying an Express.js application with Back4App Containers can be straightforward and manageable. The combination of Express.js’s power and Back4App’s simplicity and comprehensive hosting capabilities allows for a smoother and more efficient deployment process.

This guide is designed to demystify the deployment process for experienced developers and novices alike, aiming to deliver your application to its users swiftly and dependably.

It’s crucial to remember that the effectiveness of your application isn’t solely based on its development but also on its deployment. Harness these tools and techniques to ensure your application reaches its ultimate potential.

FAQs

What is Express.js?

Express.js is a compact, unopinionated web application framework designed for Node.js, aiding in the creation of versatile web apps, be they single-page, multi-page, or hybrid types.

What are the advantages of Express.js?

User-Friendly: Express.js makes it easy to create web applications in a structured and manageable manner.
Multi-Purpose: It’s designed to handle a wide range of application types – from API servers to static file servers and comprehensive web apps.
Strong Community: Being part of the Node.js ecosystem, it benefits from a large and active community, providing a wealth of useful middleware components.