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.

Here are the steps I took to deploy the app

1. Executed ’ng build’ inside the root folder of my project
2. Moved the @angular/cli dependency from devDependencies to dependencies in package.json
3. Zipped the contents of the dist folder along with package.json
4. Deployed zip folder to AWS EB configured with the node.js platform, node version 8.11.3, the same as my local environment.

I always end up with a ‘npm install failed’ error when I check eb-activity.log.

Am I missing something trivial here? Would really appreciate any help with deploying angular apps to EB.

Answer 1

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!