Skip to content

Latest commit

 

History

History
98 lines (85 loc) · 2.68 KB

README.md

File metadata and controls

98 lines (85 loc) · 2.68 KB

ModernAngular

npm i -g nx
npm i -g @nrwl/cli
pnpx create-nx-workspace@latest
  • choose standalone angular app
  • application name, app
  • standalone components, yes
  • routing, no
  • stylesheet format, css
  • caching, no

Cypress additional set up

pnpm add -D @testing-library/cypress
  • update -> "types": ["cypress", "node", "@testing-library/cypress"], in tsconfig.json
  • add -> import '@testing-library/cypress/add-commands'; in cypress/support/commands.ts

Tailwind CSS Setup

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
  • Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
  • Add the @tailwind directives for each of Tailwind’s layers to your ./src/styles.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;

Development Steps

  • run the application by running npm run start
  • generate a module name shared.module.ts
  • create a directory name pages
  • generate a standalone home component -> path is src/app/pages
  • generate a standalone posts component -> path is src/app/pages
  • generate a standalone todos component -> path is src/app/pages
  • create app/app.routes.ts
  • update main.ts
  • add router-outlet to app.component.ts
  • run the application and check all pages
  • create configs/axios.config.ts
  • generate a services/http.service.ts -> path is src/app/services
  • create models.ts
  • create store/state.ts
  • implement todos in store/state.ts
  • create store/actions.ts
  • implement todos in store/actions.ts
  • create store/index.ts for barrel imports
  • update todos.component
  • run the application
  • implement posts in store/state.ts
  • implement posts in store/actions.ts
  • update posts.component.ts
  • update home.component.ts
  • run the application
  • create store/getters.ts
  • implement computed for todos and posts in store/getters.ts
  • update store/index.ts
  • generate components/footer.component.ts -> path is src/app/shared/components
  • generate components/menu.component.ts -> path is src/app/shared/components
  • generate components/nav-bar.component.ts -> path is src/app/shared/components
  • add footer and nav-bar to app.component.html
  • update the menu, nav-bar, and footer
  • run the application and check state gets lost
  • generate utilities/local-storage.service.ts
  • update store/actions.ts
  • update store/state.ts
  • update the main.ts with localstorage service
  • run application and check localstorage in devtool
  • write tests helpers/compute
  • run jest tests
  • write e2e tests
  • update package.json with cypress
  • run e2e tests