Skip to content

ヽ(^◇^*)/ A site pre-rendered with Angular Universal and deployed with Netlify! Yay!

Notifications You must be signed in to change notification settings

tzmanics/angular-universal-pre-render

Repository files navigation

≧(´▽ `)≦ 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.

About

ヽ(^◇^*)/ A site pre-rendered with Angular Universal and deployed with Netlify! Yay!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published