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 Here is the related article: How To Develop and Build Angular App With NodeJS<\/a> .<\/p>\n\n\n\n In this manual implementation, we build the Angular app and place the appropriate code into one folder and run or deploy the application. As a first step, we need to build the Angular app and all the static assets and built files are placed into the dist<\/strong> folder.<\/p>\n\n\n\n All the built and static assets are placed under this folder dist\/angular-nodejs-example<\/strong><\/p>\n\n\n\n Once you built the application, all you need to do is create a separate folder and place the nodejs related stuff in that folder. Let\u2019s create a folder called angular-nodejs<\/strong> and put server.js, package.json, and dist folder inside it.<\/p>\n\n\n\n Let’s run the app by importing the whole folder angular-nodejs into VSCode editor and install the dependencies for the server.<\/p>\n\n\n\n The app is running on the server port 8081.<\/strong><\/p>\n\n\n\n All the below steps should be done manually and these are time-consuming tasks.<\/p>\n\n\n\n In the above implementation, once we put everything in the folder we need to install dependencies for the nodejs server to run the app. This is an additional step we need to do before running the app.<\/p>\n\n\n\n We can skip this step with the webpack. When we build the Angular code, the Angular CLI uses a webpack internally to build and bundle the entire code into few files. We can use the same for the nodejs server as well.<\/p>\n\n\n\n First, we need to install a webpack globally and in the project as well.<\/p>\n\n\n\n We need to have a webpack.config.js <\/strong>in the root folder since a webpack looks for this file. Here is the file. We have an entry file and output file and it is placed in the root folder.<\/p>\n\n\n\n Let\u2019s build and bundle it. All you need to do is to run this command If the filename is different than webpack.config.js you need to pass that filename with the webpack command With this, we can skip the step The only thing we have solved is to skipping node dependencies installation. There are still things we are doing here manually.<\/p>\n\n\n\n In the above sections, we have seen manual steps and these steps have to be eliminated. We can achieve complete automation with the gulp<\/a>. All the following steps can be made automated with the gulp.<\/p>\n\n\n\n Let\u2019s install all the required gulp packages to accomplish the above points.<\/p>\n\n\n\n when you run the command You can actually see some tasks are run one by one and others are in parallel. For example, copying Angular code and building server code (line 67) can be run in parallel because there is no dependency between these. With the gulpfile.js in place, all you need to do is issue this command We have seen different implementations so far. All these implementations include putting all the related files together and package it. We used different tools and bundlers to do that. But with Docker, we place all the files in the Docker file system and create a Docker image out of it.<\/p>\n\n\n\n Here is the complete post of how we can package with Docker: How to Dockerize Angular App With NodeJS Backend<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n Packing your application is done now it\u2019s time to deploy that on the servers. You can deploy this package on different platforms or server architectures but, covering all those is out of scope for this post. Let us see one example of deployment of this application. Just follow the below post if you want to learn how to deploy this packaged app on AWS Elastic Beanstalk:<\/p>\n\n\n\n AWS \u2014 How to Deploy Angular With NodeJS App On Elastic Beanstalk<\/a><\/p>\n\n\n\n Always automate packaging your app. In that way, you can save lots of time and be more productive.<\/p>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/1200\/0*e_CzqQ5XnJwO7yH4.gif\")
<\/figure>\n\n\n\n1. Manual Implementation<\/em><\/strong><\/span><\/h4>\n\n\n\n
\/\/ change to my-app directory\ncd my-app\n\n\/\/ build the app\nnpm run build<\/code><\/pre>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/1010\/1*7sC7yGvrJBo56mfHV2MM8w.png\")
![\"Image](\"https:\/\/miro.medium.com\/max\/1334\/1*nFSZuCNcJuCP6TWDoDyo9g.png\")
Run the application<\/h4>\n\n\n\n
\/\/ install dependencies\nnpm install\n\n\/\/ run the app\nnpm start (node server.js)<\/code><\/pre>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/1490\/1*WqP85UuCSJCiYtAiyXUrnQ.png\")
![\"Image](\"https:\/\/miro.medium.com\/max\/1989\/1*1Q4RMA1b00fd3-lFCMlINg.png\")
Disadvantages<\/h4>\n\n\n\n
2. With Webpack<\/span><\/em><\/strong><\/h4>\n\n\n\n
\/\/ install webpack\nnpm install webpack -g\nnpm install webpack --save<\/code><\/pre>\n\n\n\nconst path = require('path');\n\nmodule.exports = {\n entry: '.\/server.js',\n mode: 'production',\n target: 'node',\n output: {\n path: path.resolve(__dirname, '.'),\n filename: 'server.bundle.js'\n }\n};<\/code><\/pre>\n\n\n\nwebpack<\/code> and the webpack looks for this file called webpack.config.js <\/strong>andbuild the entire server code and put it into one file called server.bundle.js. <\/strong>Here is the modified package.json file.<\/p>\n\n\n\n{\n \"name\": \"angular-nodejs-example\",\n \"version\": \"1.0.0\",\n \"description\": \"node server\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"node server.bundle.js\",\n \"build\": \"webpack\",\n \"dev\": \"nodemon .\/server.js localhost 3080\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https:\/\/github.com\/bbachi\/angular-nodejs-example.git\"\n },\n \"author\": \"Bhargav Bachina\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https:\/\/github.com\/bbachi\/angular-nodejs-example\/issues\"\n },\n \"homepage\": \"https:\/\/github.com\/bbachi\/angular-nodejs-example#readme\",\n \"dependencies\": {\n \"express\": \"^4.17.1\",\n \"webpack\": \"^4.42.1\"\n },\n \"devDependencies\": {\n \"nodemon\": \"^2.0.2\"\n }\n}<\/code><\/pre>\n\n\n\nwebpack <filename>.<\/code> Once you build the server code all you need is server.bundle.js file. You don\u2019t even need any packages, package.json, etc.<\/p>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/1332\/1*txiWJsqoxW-kBfZK5-MTDg.png\")
npm install<\/code> (installing dependencies) and you can just run node server.bundle.js<\/code> and you can see the app running on port 8081.<\/strong><\/p>\n\n\n\nDisadvantages<\/h4>\n\n\n\n
3. Packaging With Gulp<\/em><\/strong><\/span><\/h4>\n\n\n\n
\/\/ install gulp globally\nnpm install gulp -g\n\/\/ install as dev dependency\nnpm install gulp gulp-zip fancy-log del webpack-stream --save-dev\n\/\/ gulp - core library\n\/\/ gulp-zip - zipping the code\n\/\/ fancy-log - logging\n\/\/ del - deleting files\/folders\n\/\/ webpack-stream - Build with webpack<\/code><\/pre>\n\n\n\ngulp<\/code> it looks for the gulpfile.js file and executes all the tasks mentioned in that file. We can execute these tasks one by one or in parallel with the help of these modules series, parallel.<\/code> Here is the file gulpfile.js.<\/p>\n\n\n\nconst { src, dest, series, parallel } = require('gulp');\nconst del = require('del');\nconst fs = require('fs');\nconst zip = require('gulp-zip');\nconst log = require('fancy-log');\nconst webpack_stream = require('webpack-stream');\nconst webpack_config = require('.\/webpack.config.js');\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 webpack_stream(webpack_config)\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> .<\/p>\n\n\n\n![\"Image](\"https:\/\/miro.medium.com\/max\/1200\/1*x4DqxLttO1D028SJ7OSUGw.gif\")
4. With Docker<\/em><\/span><\/strong><\/h4>\n\n\n\n
Deploying on AWS Elastic Beanstalk<\/span><\/h4>\n\n\n\n
Summary<\/em><\/strong><\/h4>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
reference:<\/h5>\n\n\n\n