Angular 7/8 SEO: Rendering Your App on Server-side with Angular Universal

In this tutorial, we'll see in a 3 easy steps how you can render your Angular 8 application on the server to make it SEO-friendly and boost its performance using the Angular Universal technology.

Let's get started!

Step 1 - Setting up Angular CLI and Initializing a Project

In the first step, you need to install Angular CLI and intialize a new project. Feel free to skip this step if you have a project ready!

Head to a new command-line interface and run the following commands:

$ npm install -g @angular/cli

You would need to have Node.JS and NPM installed on your machine.

Next, run the following command to initialize a project:

$ ng new angular-universal-app

Step 2 - Setting up Angular Universal

The next step is to set up Angular Universal in your project.

Thanks to the ng add command available on Angular CLI v7+, you can add server-side rendering in your project with a few commands using the @nguniversal/express-engine schematic.

Go back to your command-line interface, and start by navigating to your project's folder:

$ cd ~/angular-universal-app

Next, run:

$ ng add @nguniversal/express-engine --clientProject angular-universal-app

The shematic will automatically add the required configurations and packages to your project and will even add an Express server.

The Express server will render a part of your Angular app and return HTML to the browser. The server runs on the 4000 port by default

Step 3 - Building and Serving the App with Express Server

That's it, we have confugured our Angular application for server-side rendering and made it SEO friendly without nearly zero efforts. In this step, we'll build and run the Express server.

Go back to your terminal and run the following commands:

$ npm run build:ssr 
$ npm run serve:ssr

This wiol build your project with SSR support and start the Express server from the http://localhost:4000 address.

Open your web browser and go to that address, you should see your Angular app running just like the ng serve command.

Conclusion

In this tutorial, we have created an Angular Universal app by adding Server-side rendering in 3 easy steps. This will make our application SEO friendly i.e can be easily dicoverable by search engines and boost its performance.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status