Deploying angular app to AWS Elastic beanstalk

Question

I’m trying to deploy a very basic angular app to elastic beanstalk. The project was created using the angular cli. I have not made any changes to the files in this project.

Answer 1

Got the deployment issue resolved! I used express to create a server and serve my angular app. I needed to add server.js to my dist/ folder. My server.js file looked like so

const express = require('express');
const http = require('http');

const app = express();

const port = process.env.PORT || 3001;

app.use(express.static(__dirname));

const server = http.createServer(app);

server.listen(port, ()=> console.log("Running..."));

Answer 2

While this does not specifically answer your question, I don't think Elastic Beanstalk is the right tool for the job. I strongly suggest hosting on a Static Website on S3, and if you want https and a custom domain name, put a CloudFront distribution in front of it.

1. Create an S3 bucket, e.g. www.mydomainname.com

2. Enable Static Website Hosting

3. Set the Bucket Policy to public read

   {
       "Version": "2008-10-17",
       "Statement": [
           {
               "Sid": "PublicReadForGetBucketObjects",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::www.mydomainname.com/*"
           }
       ]
   }
   

4. Build the angular app locally, into a dist folder.

5. Push the files to the website using the aws-cli

   aws s3 sync dist s3://www.mydomainname.com/

This solution will cost pennies, much lower than an Elastic Beanstalk solution (EC2, EBS, ELBs). Elastic Beanstalk is great for Monolithic apps, but their existence is numbered, and the wrong paradigm when you are talking SPA, IMO.

I know I'm pushing my luck now, but I would also strongly recommend using the Serverless Framework to build and deploy NodeJS API endpoints for your Angular App to interact with.

Answer 3

Follow the steps:

-- Angular app

1. Create your Angular App
2. Build your Angular App using ng build --prod command
3. This will create a dist folder like 'dist/app-folder' with HTML, js, and CSS

The angular app you just built won’t work as a static website, it has to run on top of a Node.js server

-- Node.js App

4. Created a new folder and create a Node.js project by running: npm init and follow the instructions
5. Name entry point: (index.js) js to 'server.js'
6. Install Express and Path using npm install express path --save command
7. Create a file named 'server.js' into the project folder
8. Now check the package.json file for a configuration named “main” the value should be 'server.js'
9. Copy the Angular dist folder to Node.js app folder
10. Open 'server.js' file paste below code

var path = require('path');        
const port = process.env.PORT ||3000;   
const app = express();

//Set the base path to the angular-test dist folder
app.use(express.static(path.join(__dirname, 'dist/yourappfolder')));

//Any routes will be redirected to the angular app
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'dist/yourappfolder/index.html'));
});

//Starting server on port 8081
app.listen(port, () => {
    console.log('Server started!');
    console.log(port);
});

11. Run Node.js project locally using 'node server.js' command
12. The app should work on localhost:3000 port
13. Take the dist folder, the server.js file, and the package.json file (of the server project) and compress them as a zip. DO NOT include the “node_modules” folder.
14. Upload the zip to your AWS Elastic Beanstalk environment
15. Browse your site

Hope this is useful!