In this article, we will be discussing about server side rendering of Angular Single Page App(SPA) using node server. For this, we will be using ng-toolkit/universal which adds all the necessary files required for server side rendering of the .html pages. Doing so makes our pages SEO friendly and our Angular based websites can be crawled and indexed by search engines.
In my last articles, we have created many Angular app using Angular 5 as well as Angular 6. Here, we will be using one of our existing Angular 6 app whose complete source code can be found here on GitHub. Also, the below method of server side rendering can be equally used with Angular 5 app.
First, traverse to any folder of your choice and execute following commands to add ng-toolkit.
git clone https://github.com/only2dhir/angular6-sidenav-example.git cd angular6-sidenav-example npm install ng add @ng-toolkit/universal
Adding ng-toolkit/universal, adds following files in our existing Angular app.
1. app.browser.module.ts 2. app.server.module.ts 3. main.server.ts 4. tsconfig.server.json 5. local.js 6. server.ts 7. webpack.server.config.js
Apart from this NgtUniversalModule from @ng-toolkit/universal is imported in our
app.browser.module.ts module will be used by browser and it bootstraps the application on the client side.
app.server.module.ts module is similar to app.browser.module.ts but it has some other modules imported such as ServerModule from @angular/platform-server, NoopAnimationsModule, ModuleMapLoaderModule, ServerTransferStateModule.
main.server.ts is the entry point for server module.
tsconfig.server.json contains typescript configuration.
server.ts will have configurations for express server which will render application HTML on the server. For all the requests, index.html will be served from folder /dist/browser
Once, this is done let us build our angular app for production by executing below command.
npm run build:prod
Above command will build the app for our production system. This will create 2 folders inside dist folder and they are browser and server. Now, to run this app on production system you can execute following command.
npm run server
Executing above command will print following in the console.
Now, you can access the application at localhost:8080 and check the source.
Do not forget to comment below lines in main.ts during server side rendering.
platformBrowserDynamic().bootstrapModule(AppBrowserModule) .catch(err => console.log(err));
To do so first make sure you have Node installed on the VM. If not installed you can do it as below:
cd /usr/devglan/example curl --silent --location https://rpm.nodesource.com/setup_8.x | bash - yum -y install nodejs
You can follow this to install any other version of Node.
Now, run following commands to install pm2 and deploy your app with name sample
sudo npm install pm2 -g
Once, this is done copy your workspace to any folder of your choice on the server. You can skip dist and node_modules folder. On the server traverse to the location of the workspace and run below commands.
npm install npm run build:prod pm2 start --name sample local.js
Onc, this is done you can easily hit
Useful pm2 commands
pm2 list #list all processes pm2 show 0 #get more details about a specific process pm2 stop all pm2 restart all pm2 stop 0 # Stop specific process id pm2 restart 0 # Restart specific process id pm2 delete 0 # Will remove process from pm2 list pm2 delete all
In this article, we discussed about server side rendering of Angular App using ng-toolkit/universal to make our app SEO friendly.
1. Material Sidenav Example
2. Spring Boot Angular Captcha
3. Rxjs Tutorial
4. Angular Data Table Example
5. Spring Boot Jwt Auth