⚡ Nx Angular App

• Angular app to show list of todos stored in a backend
• Tutorial code from Nx
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Nx Angular App
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Nx uses a single repo for both frontend and backend apps with a shared library.
• Nx ensures that adding another app to the repo does not increase existing test or build times.
• Uses computational caching - so test and lint tasks are not repeated on unchanged code.
• Nx can create a dependency diagram - see screenshot below.

📷 Screenshots

📶 Technologies

• Nx with Angular plugin used to create project workspace
• Angular framework v12
• Nest Plugin v7

💾 Setup

• Install nx using npm install -g nx
• In app, install dependencies using npm i
• nx dep-graph to see a diagram of the dependencies of your projects.
• nx serve todos for a dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• npx nx build todos
• npx nx lint todos --with-deps to lint todos app & libraries

Nest Backend:

• npx nx serve api to serve the backend
• npx nx build api to build the backend
• npx nx test api to test the backend

🔧 Testing

• npx nx e2e todos-e2e --watch for end to end testing of todos app
• npx nx test to test todos app - tests need fixing

💻 Code Examples

• From app.service.ts: a simple function to create a random todo title string

addTodo() {
    this.todos.push({
      title: `New todo ${Math.floor(Math.random() * 1000)}`,
    });
  }

🆒 Features

• tba

📋 Status, To-Do List

• Status: Working.
• To-Do: nxapp\apps\todos\src\app\app.component.spec.ts test specs need to be updated.

👏 Inspiration/General Tools

• Angular Nx Tutorial - Step 1: Create Application

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com