Deploy Mean Stack Application on AWS Beanstalk

In this article I will share with you the steps I took after few failed attempts to deploy Mean Stack application on AWS Beanstalk.

Some time back I had developed a simple mean stack application (checkout the article) that performs basic CRUD operations on the Customer model.

I was looking ways to deploy it on AWS using its Elastic Beanstalk service but did not find any satisfactory solution explaining how to do that.

So I thought to write about my learnings and what changes I made in my existing mean stack application and what steps I took in order to deploy it on the AWS Beanstalk.

So let’s see what we need in order to deploy Mean Stack application on AWS Beanstalk.

Prerequisite

• All you need is an AWS account and if you don’t have one, you can create a free tier account for free in few simple steps. Check out this link for more details.
• I assume that you already have a mean stack application or you already have local development environment setup to develop one so that you can follow the code changes I am going to share with you here.

Deployment Steps

In order to deploy our means stack application on AWS Beanstalk we need to first make few code changes in our application.

Second, we have to login to AWS and configure Beanstalk service to deploy our application.

Code Changes

Open your application in the VS Code editor or any code editor that you are using.

Change in the Angular application code

I made few minor change in the Angular client application.

• My client application has a service to provide CRUD operation and it makes http calls to Restful API hosted on backend server which listens at http://localhost:3000/Customers URL. This would have not worked once we deployed our application on AWS so I removed the localhost part of the API URL like below.

readonly APIUrl = " /Customers";

• I also wanted to build my Angular app in the folder called public so I changed the ** outputPath ** value to public in the angular.json file of my Angular application.

"outputPath": "public",

That’s all the changes I made in the Angular application code.

Change in the backend server code

When we deploy mean stack application on AWS Beanstalk we need to choose Node.js environment that expects server.js or app.js files at the root to launch the server to host the application.

In mean stack applications backend server that hosts the Restful API is generally implemented either in server.js or app.js file as convention.

We need to make few changes in our server code so it can serve the requests to our Angular application as well.

So I added following code in the server.js file in which I had written my backend server code.

const path = require('path');
app.use(express.static(path.join(__dirname, '/public')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/public/index.html'));
});

Also installed path package to make this code work using following command.

$ npm install path –save

Change in Package.json file

There were 2 package.json files in my mean stack application.

One for Angular application in the client folder and another one for the backend server at application root folder.

Since I had to deploy single package.json file so I needed to collate all the dependencies for client and server in single package.json file.

So I copied all the dependencies required for Angular application from the client’s Package.json file and added them in the Package.json file that contains dependencies for my backend server.

    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"

And last, I made sure that the start script in the Package.json file should be having node server.js command.

Build Angular Client Application

Now I built the Angular client application by running following command.

ng build –prod

It created public folder under my Angular client application folder that I moved to the root folder of my mean stack application in the same level as server.js file.

Add Deployable artifacts in Zip file

Now I created mean-stack.zip file containing all the artifacts for my Angular client application (public folder) and my backend server.

Configure AWS Beanstalk service

After getting ready with my deployable zip file I logged into AWS console using my account credentials and from the services section clicked on AWS Elastic Beanstalk.

In order to host applications on the AWS Elastic beanstalk service we need to first create a beanstalk application in which you can create one or many environments to host your applications.

So I created application with customer-store name.

And then clicked on Create one now to create new environment for my mean-stack application that I wanted to deploy.

Next I chose Web Server Environment since I wanted to host web application and clicked on select button.

I entered the domain name customer-store that was available for my application. In Basic configuration section chose Node.js as Preconfigured platform.

In the Application code section, I chose Upload your code option since I wanted to deploy code from my local machine.

Then clicked on Upload button to upload the mean-stack.zip file that I had created earlier containing all the deployable artifacts for my mean stack application.

And last, I clicked on Create Environment button to let the Beanstalk service to configure environment and once the environment was ready it provided the URL to launch the application.

Below is the image of my mean stack application successfully deployed on AWS Beanstalk.

You can get the source code of this application from my GitHub repository mean-stack-aws-beanstalk and try yourself to deployed it on AWS.

Hope my article was clear enough to give an idea about deploying mean stack application on AWS Beanstalk…check out my other articles as well.

The post Deploy Mean Stack Application on AWS Beanstalk appeared first on Sanjay Saini’s Tech World.