Skip to content

README.md

Latest commit

 

History

History
82 lines (64 loc) · 3.81 KB

README.md

File metadata and controls

82 lines (64 loc) · 3.81 KB

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:
  • 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.