Angular App Template

This repo contains an Angular project with everything you need to start developing a new web app.

Stacks

• Angular SSR
• TailwindCSS
• Node.js
• TypeScript

Needs Prisma in Angular SSR? Check out the prisma branch and its README.md

Check out the GitHub tags to see which Angular versions are supported by this project.

Features

• Angular with SSR (A complete guide to SSR).
• TailwindCSS.
• Folder structure:
  • components folder.
  • components/UI folder.
  • components/pages folder with HomePageComponent and Page404Component.
  • services folder with EnvService.
• <router-outlet></router-outlet> in app.component.html.
• Angular CDK.
• Ability to set different title and description per page.
• sitemap and apicache to serve robots.txt and sitemap.xml.
• Dockerfile to build a Docker Image.
• provideHttpClient(withFetch()) already configured.
  • From angular.dev: It's strongly recommended to enable fetch for applications that use Server-Side Rendering for better performance and compatibility.
• Hydration already configured with:
  • EventReplay
  • custom HttpTransferCacheOptions.
• Hybrid rendering ready to use.
• Shell script development.sh to reload the docker container.
• Unified .env file for both frontend and backend (Read more).
• Zoneless change detection (Read more)

Setup the project

1. Clone the repository (you can choose the Angular version from the GitHub tags).
2. Move the repository to new git repository.
   • cd to the repo folder.
   • remove .git (hidden) folder.
   • run git init.
3. Rename the project.
   • rename the project folder.
   • find all occurrences of angular-app-template in the project and replace it with your new app name.
4. Rename path in Dockerfile.
   • in the last line, replace project-name with your project name.
5. Set parameters in development.sh.
6. Add .env to .gitignore.

During development:

• Customize routes in app.routes.ts.
• Setup server.ts by following the TODOs.
  • define the content of robots.txt
  • static routes are automatically added to sitemap.xml (it's your task to manage the dynamic ones).
• Customize the HTTP request cache system in app.config.ts.
• Customize .env variables. To pass them to the frontend, follow this steps:
  • Add a new variable into .env.
  • Pass it into TransferState in app.config.server.ts.
  • Retrieve it from TransferState into env.service.ts.
• Choose the rendering mode for each page in app.routes.server.ts.

Serve the app with Docker

• run development.sh.

Test locally with server features

Running with ng serve means some server functionality (like robots.txt and sitemap.xml) will not work. So:

• run npm run watch (This will build the app each time the files are changed).
• start the node.js server to serve the app npm run serve:ssr:angular-app-template (replace angular-app-template whit your app name).

Contributing

Feel free to open issues or pull requests to discuss improvements and additional features.