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

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!