Building Server Side Rendered Apps with the Angular Universal Starter

Angular Universal Starter is a minimal starter for quickly getting started with an isomorphic Angular 2+ web application. You can simply clone it from Github and start building your universal Angular app upon it. Lets see how to do that.

First you need to have Git installed on your system. You need also to have Node.js and NPM installed and configured.

Next clone the Universal Starter from Github with:

git clone https://github.com/angular/universal-starter.git universal-demo 

Then navigate inside the cloned repo and install the required dependencies with:

npm install 

After successfully installing all requirements you can start the development server using:

npm start

After building your application you can create a production bundle using:

npm run build:prod

## Some notes when using Angular Universal

You shouldn't use the browser specific objects such as window, document, navigator because they only exist on browser environment and since Angular Universal uses a Node.js express server you can't access them.But what you need to do if you need to manipulate the DOM for example?

You should do that only on client side code and make sure to wrap them inside isBrowser function

import { isBrowser } from 'angular2-universal'   

Make sure to use Angular Renderer class instead of manipulating native elements directly.

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