Angular 8 Server Side Rendering
Angular application executes in the browser and rendering pages in the DOM by user actions. In this tutorial we will learn, How to run Angular application on the server? Angular application you can run on the server using add Angular Universal and make Angular application SEO friendly.
Why use Server Side Rendering (SSR)?
There are 3 reasons for create angular application with server side rendering.
- Web crawlers through search engine optimization (SEO).
- Improve performance on mobile.
- Show the first page quickly.
Step 1: Install the Angular CLI
Install the angular cli globaly using
npm, open a terminal or console using following command for creating angular project.
Note: If already installed angular cli then skip step 1.
Must be ensure before installation of angular cli nodejs should be installed.
Step 2: Create Application
Create an application using below command.
Step 3: Add Angular Universal in Your Application
Angular Universal, a technology that renders Angular applications on the server. Install Angular Universal using following command.
The command create following files.
Step 4: Run This Application
You can run Server Side Application using following commands.
Open a browser and navigate to http://localhost:4000/ for access this application.
This application working as nodejs project. You can also run this project using following command.
Check This Application SEO Friendly
You can check this application SEO friendly. You can access your application using following commands. And Google access your web application pages someting like this.
Change Port in SSR Angular Application
If you want to change port in Server Side Rendered Angular Application then edit server.ts file and go to line no 90
const PORT = process.env.PORT || 4000; and chagne 4000 to 4005 (as you want).
In this tutorial we have learnt how to run Angular 8 application on the server using Angular Universal. And how to make Angular application SEO friendly and change port of this application.