🔋 by Webpack, TypeScript, Jest and Cypress.
The starter contains a single Counter component, how you're going to use React hierarchy it's up to you, however I'm going to use separations by pages. Each page is made by a dictionary containing components and redux.
The tests live near by source code.
Unit test are using *.test.js or *.test.ts naming convetion, Cypress end to end tests are using *.spes.js or *.spec.ts naming convention.
Serves the application with webpack dev server.
Builds the application in production mode into ./public output directory.
Builds the application in development mode into ./public output directory.
Starts static file server with the application from ./public directory on at http://localhost:5000.
Runs Jest tests.
Opens Cypress integration testing tool.
Runs TypeScript compiler without any output to check type correctness and then runs ESLint.
SVG files are supported in a stupidly easy way to use, thanks to file-loader and @svgr/webpack.
If you want to use an SVG inside the image tag, just import the SVG file and put it into the <img /> tag, as it's shown in the code snippet.
import reactLogo from './logo.svg';
const Image = <img src={reactLogo} alt="React logo" />But sometimes you want to use the SVG file as the React component and this is exactly the time when @svgr/webpack comes to the party and shines. Just import the SVG file as liked it would be a named export.
import { ReactComponent as ReactLogo } from './logo.svg';
const WithImage = <><ReactLogo /></>Startup comes with Docker support. The application is served by Caddy server, the configuration for Caddy server is in the Caddyfile.
To build the Docker file use
docker build . --tag react-startup:alpha.
To start that Docker image docker run --rm -it -p 127.0.0.1:9090:80 react-startup:alpha.
- Add ESLint
- Add Dockerfile
- Add images imports
- Add SVG imports
- Add Azure CI pipeline including Unit tests and Cypress
- Add SonarQube via SonarCloud
- Dependencies cleanup
- Add font-types imports