Deploy Mean Stack Application on AWS Beanstalk
Tags: aws, webdev, javascript, angular
Published: 2020-01-27 11:48:13

![Deploy Mean Stack Application on AWS Beanstalk](https://i0.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/Deploy-mean-stack-app-aws-beanstalk.png?resize=543%2C257&ssl=1)

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](https://sanjaysaini.tech/build-mean-stack-application/)) 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](https://aws.amazon.com/) 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.

![Mean Stack App artefacts for AWS Beanstalk](https://i1.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk0.png?resize=537%2C354&ssl=1)

### 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.

![AWS Beanstalk Service](https://i2.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk1.png?resize=557%2C276&ssl=1)

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.

![Deploy Mean Stack Application on AWS Beanstalk - create application](https://i0.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk2.png?resize=551%2C264&ssl=1)

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

![Deploy Mean Stack Application on AWS Beanstalk - Environment](https://i1.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk3.png?resize=564%2C282&ssl=1)

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.

![Create AWS Beanstalk - Environment](https://i0.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk4.png?resize=559%2C383&ssl=1)

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.

![Deploy Mean Stack Application on AWS Beanstalk](https://i0.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk5.png?resize=558%2C453&ssl=1)

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.

![AWS Beanstalk evn ready](https://i0.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/sanjaysaini-tech-aws-beanstalk6.png?resize=556%2C271&ssl=1)

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

![Deploy Mean Stack Application on AWS Beanstalk](https://i0.wp.com/sanjaysaini.tech/wp-content/uploads/2020/01/Deploy-mean-stack-app-on-aws-beanstalk.png?resize=556%2C374&ssl=1)

You can get the source code of this application from my GitHub repository [mean-stack-aws-beanstalk](https://github.com/sanjaysaini2000/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](https://sanjaysaini.tech/deploy-mean-stack-application-on-aws-beanstalk/) appeared first on [Sanjay Saini’s Tech World](https://sanjaysaini.tech).