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.
To skip all this you could also just click this button:
- 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
- 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
- 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 :)
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.
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
.
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.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.