Angular 8 Server Side Rendering

Posted at: January 27, 2020 6:47 PM

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).

Conclusion

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.

This lesson also available on YouTube
server side rendering server side rendering in Angular 8 server side rendering angular angular server side rendering example angular server side rendering tutorial ssr

Please leave comments

4 Comments