In this Part I of the series, we will handle the initial setup of Angular Universal and explain how to get the static HTML files that are ready to be hosted.
If you don't have Angular CLI installed, run the following:
npm install -g @angular/cli
Initiate the project (for this series let's use angular-prerender-markdown for the project name):
ng new angular-prerender-markdown
Add Angular Universal:
ng add @nguniversal/express-engine
🎉 The project is setup. Official Angular Universal docs explain this process nicely.
Now we can use two commands:
npm run dev:ssr -> this one starts the dev server with live reload, and we'll use it for development.npm run prerender -> this one pre-renders the site and we'll use it to create files that will eventually be hosted on AWS S3.If we would run npm run prerender now, we would already get a working static HTML website, readily deployable.
The files are located in dist\angular-prerender-markdown\browser.
Now for the next step, we'll set up an AWS S3 bucket for website hosting, and host these files.
👉 Continue with part 2: Dynamic Content with Angular Prerender