![\"Image](\"https:\/\/miro.medium.com\/max\/1754\/1*6Hw9jIN9qCa-U9ocZ4XlgA.png\")
<\/figure>\n\n\n\nAs you see in the above figure, we build our project and create a zip. Once we build the zip, we upload that zip on the Elastic Beanstalk environment. If you have a custom domain you can point that to the elastic beanstalk URL so that your app can be accessible to the public through that URL.<\/p>\n\n\n\n
Example Project<\/h4>\n\n\n\n
This is a simple project which demonstrates developing and running Angular application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.<\/p>\n\n\n\n Firstly,we have to build the project and get it ready for the deployment in the Elastic Beanstalk environment. We are using gulp<\/a> to automate building the project and these are the following steps we should automate with a gulp<\/a>.<\/p>\n\n\n\n Here is the file gulpfile.js in which we created tasks for all the above points.<\/p>\n\n\n\n All we need to run this command Once you have the zip file ready it\u2019s time to deploy this zip file to Elastic Beanstalk environment. First, we need to create an IAM user which has access and permissions to deploy on an Elastic Beanstalk environment.<\/p>\n\n\n\n I created an IAM user called developer1<\/strong> and added to the group WebDevelopers<\/strong> which has permission AWSElasticBeanstalkFullAccess <\/strong>and AmazonRoute53FullAccess.<\/strong><\/p>\n\n\n\n Let\u2019s login to AWS console with that IAM user and you can go to Elastic Beanstalk and create an application. Since it\u2019s nodejs project we have to choose a platform as Node.js and upload the zip archive that we have created in the above step.<\/p>\n\n\n\n Once you click on the create application it will take a few minutes to set up the environment. Once it is deployed and if everything goes well you can see the following screen.<\/p>\n\n\n\n You can see the URL for this application on the top. Just copy that URL and hit it in the browser and you can see your app running on AWS.<\/p>\n\n\n\n When you deploy the application sometimes it might go wrong. Let\u2019s how we can debug the deployment. First, if something goes wrong you can see the deployment environment as red.<\/p>\n\n\n\n If you can click on that you will be redirected to a details page with the status Degraded. We can see what is the error here it is actually missing package.json in the zip archive.<\/p>\n\n\n\n In this scenario, we caught the error on the details page itself. But, this is not the case all the time. We can request logs to go into more details about the application.<\/p>\n\n\n\n Updating the deployment is very easy all you need to do is upload the new zip file with the version label so that you can go back to the versions later. For example, if something goes wrong and not working properly with the latest deployment you can always go back to a specific version.<\/p>\n\n\n\n You can actually see the versions here and you can select and deploy a specific version.<\/p>\n\n\n\n I just want to mention some points here which anybody can encounter these and saves you a lot of time. You can always change these settings in the configuration section.<\/p>\n\n\n\n When you are zipping all the files make sure you zip the files, not the entire folder. We tend to right-click on the folder and compress it but you should select all the files inside that folder and compress it.<\/p>\n\n\n\n Make sure you have a package.json file in that archive. As soon as you upload the zip file elastic beanstalk unzips it and looks for the package.json to install any dependencies.<\/p>\n\n\n\n Make sure you have a start command in the package.json and it is pointing to the right file.<\/p>\n\n\n\n On the NodeJS server make sure you are listening on the port 8080. You can configure this port by using the PORT environment variable in the application code like this ![\"Image](\"https:\/\/miro.medium.com\/max\/1320\/0*HncvE4Qb5VEJqnH7.gif\")
Prerequisites<\/h4>\n\n\n\n
Build the Project<\/h4>\n\n\n\n
const { src, dest, series, parallel } = require('gulp');\nconst del = require('del');\nconst fs = require('fs');\nconst zip = require('gulp-zip');\nconst log = require('fancy-log');\nvar exec = require('child_process').exec;\n\nconst paths = {\n prod_build: 'prod-build',\n server_file_name: 'server.bundle.js',\n angular_src: 'my-app\/dist\/**\/*',\n angular_dist: 'prod-build\/my-app\/dist',\n zipped_file_name: 'angular-nodejs.zip'\n};\n\nfunction clean() {\n log('removing the old files in the directory')\n return del('prod-build\/**', {force:true});\n}\n\nfunction createProdBuildFolder() {\n\n const dir = paths.prod_build;\n log(`Creating the folder if not exist ${dir}`)\n if(!fs.existsSync(dir)) {\n fs.mkdirSync(dir);\n log('? folder created:', dir);\n }\n\n return Promise.resolve('the value is ignored');\n}\n\nfunction buildAngularCodeTask(cb) {\n log('building Angular code into the directory')\n return exec('cd my-app && npm run build', function (err, stdout, stderr) {\n log(stdout);\n log(stderr);\n cb(err);\n })\n}\n\nfunction copyAngularCodeTask() {\n log('copying Angular code into the directory')\n return src(`${paths.angular_src}`)\n .pipe(dest(`${paths.angular_dist}`));\n}\n\nfunction copyNodeJSCodeTask() {\n log('building and copying server code into the directory')\n return src(['package.json', 'server.js'])\n .pipe(dest(`${paths.prod_build}`))\n}\n\nfunction zippingTask() {\n log('zipping the code ')\n return src(`${paths.prod_build}\/**`)\n .pipe(zip(`${paths.zipped_file_name}`))\n .pipe(dest(`${paths.prod_build}`))\n}\n\nexports.default = series(\n clean,\n createProdBuildFolder,\n buildAngularCodeTask,\n parallel(copyAngularCodeTask, copyNodeJSCodeTask),\n zippingTask\n);<\/code><\/pre>\n\n\n\ngulp<\/code> at the root of the application and it creates the final zip file under the prod-build<\/strong> directory.<\/p>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/1201\/1*gedni9QlVF4BT-6J6LcqIg.png\")
Deploy on Elastic Beanstalk<\/span><\/h4>\n\n\n\n
![\"Image](\"https:\/\/miro.medium.com\/max\/1724\/1*IEoTkE8w-1rcW9ws7R6qUw.png\")
![\"Image](\"https:\/\/miro.medium.com\/max\/1695\/1*9IMrOsldmc1lizoH0u7NkA.png\")
![\"Image](\"https:\/\/miro.medium.com\/max\/2013\/1*AafO8nqJUI92rvNb99ZkVw.png\")
<\/figure>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/2765\/1*FnST8vQiZrsR2G3r7hCzQw.png\")
![\"Image](\"https:\/\/miro.medium.com\/max\/2350\/1*LrpVMTAq25PZ7EyoNzR53g.png\")
Debugging and Update the Deployment<\/span><\/h4>\n\n\n\n
Debugging<\/h4>\n\n\n\n
![\"Image](\"https:\/\/miro.medium.com\/max\/1907\/1*CmLoaJbomfx6B1y2WORnkg.png\")
<\/figure>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/2767\/1*CPUpOb8Lv3Vs8yLQHrEl_A.png\")
<\/figure>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/2762\/1*e-HWZDUSj3qQvt0lFbFSOA.png\")
<\/figure>\n\n\n\nUpdate the deployment<\/h4>\n\n\n\n
![\"Image](\"https:\/\/miro.medium.com\/max\/2317\/1*kS0TzVxI0uXVQuqKMWpvWg.png\")
![\"Image](\"https:\/\/miro.medium.com\/max\/2818\/1*89S9q_j7p4Ga-4hhHeeyYw.png\")
<\/figure>\n\n\n\nThings To Consider<\/span><\/h4>\n\n\n\n
Zipping<\/h4>\n\n\n\n
Package.json<\/strong><\/h4>\n\n\n\n
start command in the package.json<\/h4>\n\n\n\n
Express port<\/h4>\n\n\n\n
process.env.PORT.<\/code> Check out this link for Configuring the proxy server<\/a><\/p>\n\n\n\nSummary<\/span><\/h4>\n\n\n\n
Tuto-video <\/h4>\n\n\n\n