to-dos-ui

Demonstrates a Test-Driven Development approach on how to develop a React web app using MobX and Cypress.
It contains setup for development inside of VSCode Dev Containers (just Dev Containers from now on) or without it. Here you can find TDD in Frontend workshop slides to explain the main concepts better.

More info about the project and its related repos can be found here: to-dos-documentation.

Prerequisites

• Docker (needed for Dev Containers and TypeScript types generation)
• You need to run API where UI makes network calls.

If you develop inside Dev Containers

• VSCode
• Dev Containers Extension

If you develop using good old Node.js (no Dev Containers)

• Node.js (version 20.11.1 was used but it should be also fine with some older versions, ideally install using nvm which will allow you to easily switch between Node.js versions if needed)
• VSCode (optional, you can use any IDE but VSCode has configured formatting on save by the lint rules of the project)

Start

If you open this project in VSCode please install Dev Containers extension and agree to re-open this project's folder in it with installing all the rest of recommended extensions.

# run once to install dependencies
npm ci

# to run the web site against locally running api
npm start

# to run the web site against Local Env api
npm run start-local-env

# to run linting
npm run lint

# to run unit tests
npm run test

# to re-generate TypeScript types by locally running API
npm run generate-api-types

Tests Execution

# to run component tests (no backend needed)
npm run cypress:run:component

# to run e2e tests against local ui (NOT local-env one!)
npm run cypress:run:e2e

# to run e2e tests against running to-dos-local-env (with real backend)
npm run cypress:run:e2e:local-env

Note: There is an issue that Cypress doesn't see Chrome from inside a Dev Container for arm64 platforms. For now it is fixed by changing --browser chrome in package.json to --browser electron. Cypress note regarding that: https://github.com/cypress-io/cypress-docker-images/tree/master/included#platforms.

TypeScript (VSCode only)

Even though it's configured from where VSCode should get the correct version of TypeScript you also need to run the TypeScript: Select TypeScript Version command and select the version from node_modules (https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions).

To run this command open any .ts or .tsx file, press Ctrl + Shift + P and past the command name TypeScript: Select TypeScript Version, press Enter, and click on the row where it could pick up the TypeScript version from node_modules.

If you don't do that you might see some weird IDE lint errors.

Cypress (Dev Containers only)

If you want to work purely inside your Dev Container you have to connect the the Dev Container VNC server (remote desktop) here http://localhost:6080/. The password is vscode. Now you should be able to see Cypress GUI executing one of the available scripts from package.json e.g.

npm run cypress:open:component

Docker Build

docker build -t to-dos-ui .

Docker Local Run

docker run -t to-dos-ui --publish 5173:80 --env VITE_API_ROOT="http://localhost:5005/to-dos-api" --rm

Helm Local

helmfile --namespace local -f ci/helmfile.yaml template

React + TypeScript + Vite (as it was created by npm create vite@latest to-dos-ui -- --template react-ts)

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Note: ESLint configuration was tuned and different from the template default setup

Env (for future)

Useful refs on how to build docker image with this UI and make its env configurable at docker run:

• https://stackoverflow.com/a/78156859
• https://vitejs.dev/guide/env-and-mode