2
Watch
0
Star
0
Fork
0
Issue
Avivhdr
Avivhdr
pushedAt 4 months ago

Avivhdr/cra-ts-boilerplate

Boilareplate-ts-client

Sections:

  1. How this boiler plate was built
  2. Coding options
  3. Available scripts
  4. TODO

How this boiler plate was built


  1. npx create-react-app --template typscript
  2. npm run eject
  3. Adding css normalize
  4. Adding EditorConfig
  5. Adding Prettier
  6. Adding Stylelint (with prettier-config**)
  7. Adding ESLint (with prettier-config** + recommended plugins)

** Configuring linters so that Prettier errors are shown as ESlint errors (in TS/JS files) and Stylelint errors (in style files)

  1. Increase TS strictness in .tsconfig and Improving .tsconfig readability
  2. Adding VSCcode project-specific settings:
    • settings.json -> Overrides user's settings
    • extensions.json -> A list of extensions that would be recommended to install when first cloning the project.
    • launch.json -> usefull for debugging inside VSCode
  3. Adding a.env file with all the available built-in options commented out.
  4. Adding Error catcher by Wrapping <App /> with an ErrorBoundary component.

Coding Options


  • Import a css file with this pattern: [name].module.css and the styled will be encpsulated to the component using css-modules.
  • Ignoring ts inside jsx:
{
  // @ts-ignore
  <Bomb />
}
  • public folder

    To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.

    From the public folder:

    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    From src:

    render() {
      // Note: this is an escape hatch and should be used sparingly!
      // Normally we recommend using `import` for getting asset URLs
      return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
    }
  • Absolute Imports - when importing a file you can use:

    1. Relative imports: ../../components/Bar.tsx

    2. Absolute imports that starts with ~.

      That way you can see a visual difference between global imports like lodash/fp & @material-ui/core, and local absolute imports like ~/components/Bar

    import React from 'react'; // external import
    import _ from 'lodash/fp'; // external import
    import { makeStyles } from '@material-ui/core'; // external import
    import Bar from '~/components/Bar'; // internal import
    import logo from './logo.svg'; // relative import

    The ESlint rule import/order will make sure the import will be in this order.


Available Scripts


start

test

click to expand! When you run the `test` script, Jest will launch in watch mode*. Every time you save a file, it will re-run the tests, like how npm start recompiles the code.

By default, when you run npm test, Jest will only run the tests related to files changed since the last commit.

Jest will look for test files with any of the following popular naming conventions:

  • Files with .js suffix in __tests__ folders.
  • Files with .test.js suffix.
  • Files with .spec.js suffix.

You can also press a in the watch mode to force Jest to run all tests.

build

serve

click to expand! When a `build` folder is present (after running the `build` script), running this script will load the build folder in the browser.

analyze

click to expand! Analyzing source code size using `source-map-exploer` and show results in the browser (must have a build version in the `build` folder - `npm run build`)

eslint

click to expand! Fixes all fixable ESlint errors and prettier errors in all `js` files

stylelint

click to expand! Fixes all fixable Stylelint errors and prettier errors in all `css` files

fix-all

click to expand! Runs the eslint script, followed by the stylelint script

prettier-eslint (do not use)

click to expand! format all files based on `.prettierrc` configuration and then pass the result to `eslint --fix`

TODO:


  • path intelisense for ~/..
  /*
    "@app/*": ["app/*"],
    "@config/*": ["app/_config/*"],
    "@environment/*": ["environments/*"],
    "@shared/*": ["app/_shared/*"],
    "@helpers/*": ["helpers/*"]
  */
ucloud ads