Setup for a webapp has a multiple-select-filter component using react and typescript. This project is based on an ejected Create React App 2.0.
This Base project has intentionally been ejected. Using rewired (Override create-react-app webpack configs without ejecting) did not work as intended together with Typescript.
Therefore the decision was made to eject the app and add the desired config overrides within the configs directly.
- Clone the repo on your machine
- Navigate to this repo in your terminal
yarn && yarn startwill install dependencies && Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
yarn start: Start development server with hot reloading. It runs onlocalhost:3000yarn build: Build a Production version of your app and build Storybook for your components,yarn lintTest Typescript and Styled Components CSS for linting errors but don't fix themyarn lint:ts: Test Typescript for linting errors but don't fix themyarn lint:css: Test Styled Components CSS for linting errors but don't fix themyarn format: Test Typescript for formatting errors and fix themyarn test: Run all unit testsyarn test:watch: Start a test watcher that will continuously run tests on every file changeyarn test:coverage: Create a coverage report for your code and determine whether your coverage is high enough
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Travis-ci will trigger build for each PR and on merge to Master.
Netlify will trigger deploy for each PR and for the master branch.
Babel as included in CRA.
Just like Create React App this project uses Webpack under the hood to bundle assets.
CRA's Webpack configuration has sensible defaults so in most cases you'll won't need to to change it. There are cases where the defaults just won't cut it.
Styled Components is used to keep the CSS of your React components closer together without extra files. Write your CSS from within your React component.
There are helper utilities available in the /styles/ folder to allow easily to write media query statements.
React Helmet helps us to change the head of the webpage. Explanation and documentation on how this can be used within the project can be found on their webpage.
To keep the code hygiene of everyone involved with a project in line, I've added testing, linting and formatting libraries to this to the project. These are made required by precommit hook.
TSLint checks your typescript for linting errors.
the 'Javascript Standard Style' rules. Additional configuration can be done in tslint.json.
yarn lint:ts
Prettier formats your code so it looks pretty and is readable.
Prettier is included in a commit hook so your code will be checked for formatting every time you try to commit. Therefore it is highly recommended you install Prettier as an extension in your code editor so Prettier will automatically format your code on every save. When you do, make sure your IDE plugin uses the same settings as defined in the project.
yarn format
Stylelint checks CSS in the project. This has been setup to check within the syntax of Styled-Components.
yarn lint:css
Testing has become a requirement for all projects, therefore it's implemented as a base in this project.
The threshold to which your components need to comply has been set to a base value of 80%. This can be changed in the package.json file.
To test the components Jest.
The following commands are some of the possible commands but these will get you started to becoming a testing star!
yarn test
This will start a full project test run. All the files that can be tested will be checked.
yarn test:watch
This will start a full project test run, but will trigger a new test run when a file that can be tested has been changed.
yarn test:coverage
This will start a full project test run, but will also give you a detailed table with every file that was tested and how they perform based on the threshold.