≧(´▽ `)≦ Angular Universal Pre-Render

This project will guide you through the process of pre-rendering your Angular project using Angular Universal and deploy it to a CDN with with Netlify.

📓 Check out this blog post to get even more details about what's going on in this project.

Setup

To skip all this you could also just click this button:

Deploy to Netlify

Local Setup

  • install with npm i
  • run npm run prerender to build and pre-render your app
  • you can see all the built files in `dist//browser
  • to serve with Angular Universal locally run ng serve:ssr

Productions Setup

  • install the Netlify CLI npm i netlify-cli -g
  • run netlify init to setup the project on Netlify & deploy it! (the /netlify.toml file has the information Netlify needs to deploy your app)
  • run netlify open to open the project dashboard, under the 'Functions' tab you can find the endpoint for your function as well as see all the logs.u

The pieces

  • this project has a skeleton for an eCommerce application that can be used as an app shell that can pre-rendered and then hydrated with Netlify Function.
  • there are also files added to implement Angular Universal so even though we are only using the pre-render functionalities of AU you are set up to take advantage of the whole SSR technology
  • the only other additional file is the Netlify configuration file which tells Netlify how and what to deploy to the CDN :)

Angular CLI Infos

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.