Skip to content

Latest commit

 

History

History
128 lines (97 loc) · 4.56 KB

README.md

File metadata and controls

128 lines (97 loc) · 4.56 KB

Everlution Create React App

Fork of the official Create React App!

Quick start

yarn create @everlutionsk/react-app <directory>

Your global NPM registry must be set to Everlution NPM.

Please use yarn config set registry https://npm.everlution.sk if necessary.

What’s Included in this fork?

⚙️ Project configuration support

Build process supports project.config.js as a source of ENV values, CSP configuration, etc.

The following code is supported:

module.exports = {
  environmentValues: {
    STAGE: 'dev',
  },
  contentSecurityPolicy: {
    scriptSrc: ["'self'"],
    imgSrc: ["'self'", 'data:'],
  },
  htmlParameters: {
    title: 'App title',
  },
};

Config will allow you to:

  • access process.env.STAGE in any environment.ts file
  • inject Content Security Policy into index.html
  • use <%= title %> placeholder in index.html

For more info about project.config.js, please see @everlutionsk/project-config.

⚙️ Build configuration support

Build process supports cra.config.js as a source of custom webpack plugins which will be used during compilation.

The following code is supported:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function () {
  return {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ['json', 'javascript', 'typescript'],
        features: ['!snippets'],
      }),
    ],
  };
};

🚀 Performance tips

Use paths in tsconfig.base.json

If you are using monorepo setup, then make sure that you have a correct paths setting in tsconfig.base.json. Otherwise, TypeScript can suffer from performance issues in watch mode.

For example, for a namespace @project, you need to add the following:

{
  "compilerOptions": {
    "paths": {
      "@project/*": ["packages/*"]
    }
  }
}

Internet Destroyer support

Babel is already trying to include all necessary polyfills for the not dead browsers. However, to support IE, you need to include additional polyfills.

We recommend to use polyfill.io with the nomodule attribute to ignore it in moder browsers.

Example:

<!-- public/index.html -->

<head>
  <script
    nomodule
    crossorigin="anonymous"
    src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.includes%2CString.prototype.includes%2CObject.assign%2CObject.entries%2CSymbol"
  ></script>
</head>

This will load the necessary polyfills for IE11. However, every blocking dependency on an external service could be harmfull, so please make sure you include nomodule attribute, which will inform the modern browsers that they need to ignore it completelly.

A provided polyfill.io link includes only the basic polyfills. To fully support IE11, you need to go trough the every page/functionality and check if there is no missing polyfill.