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).

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.