{"id":15021398,"url":"https://github.com/accurat/accurapp","last_synced_at":"2025-10-28T16:31:21.760Z","repository":{"id":50939132,"uuid":"75402479","full_name":"accurat/accurapp","owner":"accurat","description":"Create JS apps with flexible build configuration, tailored for the specific needs of Accurat","archived":false,"fork":false,"pushed_at":"2022-04-28T08:51:00.000Z","size":7852,"stargazers_count":21,"open_issues_count":30,"forks_count":5,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-01-27T23:36:26.738Z","etag":null,"topics":["babel","create-react-app","eslint","react","webpack","webpack-blocks"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/accurat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-02T14:28:17.000Z","updated_at":"2023-06-26T15:36:24.000Z","dependencies_parsed_at":"2022-08-25T12:11:38.137Z","dependency_job_id":null,"html_url":"https://github.com/accurat/accurapp","commit_stats":null,"previous_names":[],"tags_count":382,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Faccurapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Faccurapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Faccurapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Faccurapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/accurat","download_url":"https://codeload.github.com/accurat/accurapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238680809,"owners_count":19512646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","create-react-app","eslint","react","webpack","webpack-blocks"],"created_at":"2024-09-24T19:56:32.047Z","updated_at":"2025-10-28T16:31:21.338Z","avatar_url":"https://github.com/accurat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## ![Accurapp](logo.png)\n\n**Accurapp** is a project kickstarter customized for the specific needs of [Accurat](http://accurat.it/).\n\nIt was originally forked from [create-react-app](https://github.com/facebookincubator/create-react-app/),\nbut significant amounts of code were rewritten and simplified. Here are some shiny features:\n\n- **ESLint** config based on [StandardJS](https://standardjs.com/) with some opinionated customizations, also with addition of a lot of React rules. [See all the rules here](https://github.com/accurat/accurapp/blob/master/packages/eslint-config-accurapp/index.js).\n- **Babel** preset based on the supported browsers with the addition of the [stage-0](https://babeljs.io/docs/plugins/preset-stage-0/) preset and the [macros](https://github.com/kentcdodds/babel-plugin-macros) plugin. Node_modules are transpiled also.\n- Possibility to define your custom **supported browsers** (both for dev and prod) in the `browserslist` field of `package.json`. This will affect the Babel transpilation and the CSS Autoprefixing.\n- **GLSL webpack loader** to import shaders and require shaders within shaders.\n- **CSV webpack loader** to import .csv files as an array of JSONs.\n- **React SVG loader** to import .svg files as react components, useful for icons. Svgs get also optimized with [svgo](https://github.com/svg/svgo).\n- **CSS Modules** support in files that end with `*.module.css`. [Read more about CSS Modules here](https://github.com/css-modules/css-modules).\n- **Web Worker** bundling support in files that end with `*.worker.js` using the [worker-loader](https://github.com/webpack-contrib/worker-loader).\n- **CSS postprocessing** using postcss to enable [Autoprefixing](https://github.com/postcss/autoprefixer) and [CSS Nesting](https://github.com/postcss/postcss-nested).\n- **JSON5 webpack loader** to import .json5 files. [Read more about JSON5 here](https://json5.org/).\n\n## Table of contents\n- [Creating a new project](#creating-a-new-project)\n- [Customization](#customization)\n  - [Customizing Webpack](#customizing-webpack)\n  - [Customizing Eslint](#customizing-eslint)\n  - [Customizing Babel](#customizing-babel)\n  - [Setting Env Variables](#setting-env-variables)\n  - [Customizing Env Variables](#customizing-env-variables)\n- [Available Env Variables](#available-env-variables)\n- [Project Scaffolding](#project-scaffolding)\n- [F.A.Q.](#faq)\n  - [How do I enable hot reloading for the state?](#faq)\n  - [Where do I put the images?](#faq)\n  - [Where do I put the custom fonts?](#faq)\n  - [What is the public folder for?](#faq)\n  - [How do I handle svg files?](#faq)\n  - [How do I enable TypeScript?](#faq)\n  - [How do I override a webpack loader?](#faq)\n  - [What's all the fuss about FUSS?](#faq)\n  - [How do I enable prettier?](#faq)\n  - [I need to support IE11. What do I do?](#faq)\n  - [How do I use a web worker?](#faq)\n  - [How do I use a service worker?](#faq)\n  - [I need title and meta tags for each route for SEO. How do I do it?](#faq)\n  - [I need to build for Electron. How do I do it?](#faq)\n  - [How do I configure a multi-project repo?](#faq)\n  - [I am getting `JavaScript heap out of memory`, what can I do?](#faq)\n- [Contributing](#contributing)\n\n## Creating a new project\nHaving installed node (`brew install node`), run this command in the directory where you want to create the `project-name` folder. This command will also handle the project scaffolding, the dependencies installation, and the git initialization with a first commit.\n```sh\nnpx create-accurapp project-name\n```\n\n\u003e **Note**: if no folder is created, then try using _yarn_ instead of _npx_: `yarn create accurapp project-name`\n\n\u003e **Note**: if it says `npx: command not found` update your node version by running `brew upgrade node`\n\n\u003e **Note:** If your project fails to start right after installing, npx may be using a cached version of `create-accurapp`.\n\u003e Remove previously installed versions with `npm uninstall -g create-accurapp`\n\nAlso, if you want to use typescript, you can just pass the `--typescript` flag.\n```sh\nnpx create-accurapp project-name --typescript\n```\n\nThen you just `cd project-name`, run `yarn start` and start creating awesome stuff! 🎉\n\n#### Setting up github\n1. Create a new repo - [link](https://github.com/organizations/accurat/repositories/new)\n1. Leave it empty, and follow the instructions displayed\n\n#### Setting up the automatic deploy\n1. Login into [netlify.com](https://app.netlify.com/)\n1. Click `New site from Git`\n1. Click `Github` and select the repo you created from the list\n1. Select `accurat` from the team list\n1. Create the project\n1. Go into `Site settings` and click `Change site name` to update the generated url with a more appropriate one\n1. Go into `Build \u0026 deploy` \u003e `Edit Settings` and select `Branch deploys: All` if you want to deploy every branch\n1. To enable **slack notifications**\n  1. First you have to get the incoming webhook url pinned in the #dev channel on slack\n  1. Then you have to paste it in `Build \u0026 deploy` \u003e `Deploy notifications` \u003e `Slack` \u003e `Deploy succeeded`\n1. Deploy site!\n\n#### Commands\nThese are the available commands once you created a project:\n- `yarn start` starts a server locally, accessible both from your browser and from another machine using your same wi-fi\n- `yarn build` builds the project for production, ready to be deployed from the `build/` folder\n- `yarn test` runs [jest](https://jestjs.io/en/). By default (if you're not in a CI) it runs in watch mode, but you can disable watch mode by passing `--watch=false`. You can also pass any other argument you would pass to jest, for example `yarn test --updateSnapshot` updates your snapshots.\n- `yarn lint` lints with eslint the `src/` folder. You can pass any [eslint options](https://eslint.org/docs/user-guide/command-line-interface#options) to the lint command, for example if you want to use eslint's fix option, you do it like this:\n```json\n\"lint-fix\": \"accurapp-scripts lint --fix\",\n```\n- `yarn prettier` prettifies all the code in the `src/` folder, overwriting the files. You can pass options also to this command, for example if you want to print only the files which would be prettified but don't overwrite them:\n```json\n\"prettier-check\": \"accurapp-scripts prettier --list-different\",\n```\n\n**NOTE**: you need to have at least Node v10 and yarn v1.2.1, make sure you have the correct versions if you run into some problems running these commands. You can check their version by running `node -v` and `yarn -v`.\n\n## Customization\n#### Customizing Webpack\nYou can pass a custom webpack config to the `buildWebpackConfig` function in the project's `webpack.config.js`.\n```js\nconst { buildWebpackConfig } = require('webpack-preset-accurapp')\n\nmodule.exports = buildWebpackConfig({\n  target: 'node',\n})\n```\n\nOr to make your life easier, you could also use [webpack-blocks](https://github.com/andywer/webpack-blocks/tree/release/release-2.0), it's a nice level of abstraction over the webpack configuration, you can add loaders, plugins, configuration with few lines. For example, this is the way to add sass.\n```js\nconst { buildWebpackConfig, cssOptions, postcssOptions } = require('webpack-preset-accurapp')\nconst { match } = require('@webpack-blocks/webpack')\nconst { css } = require('@webpack-blocks/assets')\nconst postcss = require('@webpack-blocks/postcss')\nconst sass = require('@webpack-blocks/sass')\n\nmodule.exports = buildWebpackConfig([\n  match(['*.scss'], [css(cssOptions), postcss(postcssOptions), sass()]),\n])\n```\n\nFor example, this is the way to customize the webpack-dev-server options.\n```js\nconst { buildWebpackConfig } = require('webpack-preset-accurapp')\nconst { env, devServer } = require('webpack-blocks')\n\nmodule.exports = buildWebpackConfig([\n  env('development', [\n    devServer({\n      // your custom options here\n    }),\n  ]),\n])\n```\n\nOr this is a way to add a custom loader.\n```js\nconst { buildWebpackConfig } = require('webpack-preset-accurapp')\n\nfunction customLoader() {\n  return (context, { addLoader }) =\u003e addLoader({\n    test: /\\.extension\\.js$/,\n    loader: 'custom-loader',\n  })\n}\n\nmodule.exports = buildWebpackConfig([\n  customLoader(),\n])\n```\n\nAnd this is a way to add a custom plugin.\n```js\nconst { buildWebpackConfig } = require('webpack-preset-accurapp')\nconst { addPlugins } = require('webpack-blocks')\nconst NpmInstallPlugin = require('npm-install-webpack-plugin')\n\nmodule.exports = buildWebpackConfig([\n  addPlugins([\n    new NpmInstallPlugin(),\n  ]),\n])\n```\n\nAlso you can still pass a custom webpack config using webpack-blocks.\n```js\nconst { buildWebpackConfig } = require('webpack-preset-accurapp')\nconst { customConfig } = require('webpack-blocks')\n\nmodule.exports = buildWebpackConfig([\n  // ...other blocks\n  customConfig({\n    target: 'node',\n  }),\n])\n```\n\n#### Customizing Eslint\nAdd your custom rules to the `.eslintrc`\n```js\n{\n  \"extends\": \"eslint-config-accurapp\",\n  \"rules\": {\n    \"no-shadow\": \"off\"\n  }\n}\n```\n\n#### Customizing Babel\nAdd your custom presets/plugins to the `.babelrc`\n```js\n{\n  \"presets\": [\"accurapp\"],\n  \"plugins\": [\n    [\"lodash\", { \"id\": [\"lodash\", \"recompose\"] }]\n  ]\n}\n```\n\n#### Setting Env Variables\nAll the Env Variables are automatically injected into the application (if used), no need to use webpack's `DefinePlugin`.\n\nYou can define your variables in those different places, **in order of importance** (1 will override 2 and 2 will override 3):\n\n1. in the `package.json`'s scripts section:\n```json\n  \"start\": \"yarn \u0026\u0026 HTTPS=true accurapp-scripts start\",\n```\n2. in the CI config script:\n```yml\n  script:\n    - GENERATE_SOURCEMAP=true yarn build\n```\n3. in the `.env` file:\n```js\n// .env\n\nSECRET=djah7s9ihdias7hdsaodhoas8hd\n```\n\n```js\n// .env.example\n\nSECRET=\n```\n\nUse as:\n```js\nconst endpoint = process.env.SERVER || www.example.com\n```\n\n#### Customizing Env Variables\nHere are the available Env Variables for the **yarn start** script:\n- **BROWSER** - If it should open local url in the browser in `yarn start` (default `true`)\n- **HOST** - The host of the web server (default `localhost`)\n- **PORT** - The port of the web server (default `8000`)\n- **HTTPS** - Set this to `true` if you wish to use HTTPS in development (default `false`)\n- **CI** - Set this to true to skip the check for newer accurapp versions (default `false`)\n\nHere are instead the available Env Variables for the **yarn build** script:\n- **PUBLIC_URL** - Use this if the application is hosted on a subpath, it will be used to resolve assets (default `/`).\nHere are some examples of its usage:\n```html\n\u003clink rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.ico\"\u003e\n```\n```js\nrender() {\n  return \u003cimg src={`${process.env.PUBLIC_URL}/img/logo.png`} /\u003e;\n}\n```\n\n- **GENERATE_SOURCEMAP** - Use this if you want to generate the external sourcemaps files (default `false`)\n\n- **TRANSPILE_NODE_MODULES** - Set this to false if you want to disable the babel transpilation of the `node_modules` (default `true`)\n\n- **WATCH_NODE_MODULES** - Set this to true if you want to recompile when any of the used `node_modules` changes (default `false`)\n\n## Available Env Variables\nThese are the Env Variables that Accurapp provides you, you cannot modify them directly:\n- **NODE_ENV** - It is equal to `'development'` in the `yarn start` command and `'production'` in the `yarn build` command\n- **LATEST_TAG** - The latest git tag you made, useful if you want to display a build version in your application\n- **LATEST_COMMIT** - The latest commit hash, useful if you want to display a more specific build version\n- **LATEST_COMMIT_TIMESTAMP** - The UTC timestamp of the latest commit, you can use it like this:\n\n```js\nnew Date(Number(process.env.LATEST_COMMIT_TIMESTAMP))\n```\n\n- **BROWSERSLIST** - It is built from the `browserslist` field in the `package.json`\n\n\n## Project Scaffolding\n```\n├── build             # created when you run yarn build\n├── public            # put the static stuff here\n│   └── favicon.ico\n├── src\n│   ├── components\n│   │   └── App.js\n│   ├── lib           # put here the utils functions reusable in other projects\n│   │   └── README\n│   ├── reset.css\n│   ├── style.css\n│   ├── index.html\n│   └── index.js\n├── .babelrc\n├── .env.example\n├── .eslintrc\n├── .gitignore\n├── .prettierignore\n├── .prettierrc\n├── jest.config.js\n├── netlify.toml\n├── package.json\n├── README.md\n├── webpack.config.js\n└── yarn.lock\n```\n\n## F.A.Q.\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I enable hot reloading for the state?\u003c/summary\u003e\n\nBy default, hot reloading is enabled for the react components tree in accurapp, but if you want to hot-reload also the [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree) files, your `index.js` should look like this:\n```js\nlet state = State.create()\n\nfunction renderApp() {\n  ReactDOM.render(\n    \u003cMobxProvider state={state}\u003e\n      \u003cApp/\u003e\n    \u003c/MobxProvider\u003e,\n    document.getElementById('root'),\n  )\n}\n\n// First render\nrenderApp()\n\n// Hot module reloading\nif (module.hot) {\n  // Some component changed, rerender the app\n  // and let the react-diffing handle the changes\n  module.hot.accept('components/App', () =\u003e {\n    console.clear()\n    renderApp()\n  })\n\n  // Store definition changed, recreate a new one from old state and rerender\n  module.hot.accept('state', () =\u003e {\n    state = State.create(getSnapshot(state))\n    console.clear()\n    renderApp()\n  })\n}\n```\nThe first argument to `module.hot.accept` must be the root component of the app, often the `Routes` component is used.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWhere do I put the images?\u003c/summary\u003e\n\nYou can put them in the `src/images` folder and require them from the js like this:\n```js\nimport logo from '../images/logo.png'\n\nconsole.log(logo) // /logo.84287d09.png\n\nfunction Header() {\n  // Import result is the URL of your image\n  return \u003cimg src={logo} alt=\"Logo\" /\u003e\n}\n```\n\nor from the CSS (see [css-loader](https://github.com/webpack-contrib/css-loader) for more info):\n```css\n.Logo {\n  background-image: url(~images/logo.png);\n}\n```\nThe advantage is that it creates a hash in the filename to invalidate eventual caching. Another thing is that images that are less than 10,000 bytes are imported as a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path, to reduce the number of requests to the server.\n\nAlso you could tell webpack to automatically optimize the images you import with the [imagemin-webpack-plugin](https://github.com/Klathmon/imagemin-webpack-plugin).\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWhere do I put the custom fonts?\u003c/summary\u003e\n\nYou can put them in the `src/fonts` folder and require them from the CSS like this (see [css-loader](https://github.com/webpack-contrib/css-loader) for more info):\n\n```css\n@font-face {\n  font-family: 'Helvetica Neue';\n  src: url('~fonts/HelveticaNeue-Thin.ttf') format('truetype');\n  font-weight: 200;\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWhat is the `public` folder for?\u003c/summary\u003e\n\nYou usually put the assets you require from the `index.html` here. Like for example the favicon.\n\nIf you need a service worker file just for making the app work offline, use the [offline-plugin](https://github.com/NekR/offline-plugin). An alternative is the [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin).\n\nYou should normally import stylesheets, images and fonts in JavaScript files using the Module System because this mechanism provides a number of benefits.\n\nThe `public` folder is a useful workaround that gives you access from browsers to a file, outside the Module System. If you put a file into the public folder, it will not be processed by Webpack. Instead it will be copied into the build folder untouched.\n\nBe careful because with this approach files are not post-processed or minified and first of all, if lost, they will cause 404 errors.\n\nFor technical in-depth analysis read the create-react-app [documentation].(https://facebook.github.io/create-react-app/docs/using-the-public-folder)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I handle svg files?\u003c/summary\u003e\n\nBy default you can import svgs as files, like you would do for images:\n```js\nimport logo from '../images/logo.svg'\n\nconsole.log(logo) // /logo.84287d09.svg\n\nfunction Header() {\n  // Import result is the URL of your svg\n  return \u003cimg src={logo} alt=\"Logo\" /\u003e\n}\n```\n\nBut if the svg is an icon, and you need to apply some styles to it, you can also import it as a react component, and pass it some `className` or `style` props:\n```js\nimport { ReactComponent as PencilIcon } from '../icons/pencil.svg'\n\n// It's like doing\n// function PencilIcon(props) {\n//   return (\n//     \u003csvg viewBox=\"...\" {...props}\u003e\n//       ...\n//     \u003c/svg\u003e\n//   )\n// }\n\nfunction Edit() {\n  // .db displays the svg as a block, removing the little space\n  // underneath that the default inline-block svg has\n  //\n  // .w1 sets the dimensions, you can also set the dimensions\n  // in px using the style attribute\n  //\n  // .black colors the icon black, like you would do with text\n  return \u003cPencilIcon className=\"db w1 black\" /\u003e\n}\n```\nUnder the hood, the loader basically wraps the svg file inside a react component, so you can treat it as such.\n\nThis strips the svg file from its original styles, because it inherits the style from the color you give it through `fill=\"currentColor\"`. If you want to keep the colors instead, call the svg like this: `pencil.colors.svg`.\n\nFurthermore it optimizes and minifies the svg using [svgo](https://github.com/svg/svgo), so it cleans up automatically the ugly and noisy svg that Illustrator exports 🙌.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I enable TypeScript?\u003c/summary\u003e\n\nTypesScript is not enabled by default in accurapp, to bootstrap a project with typescript you will have to run:\n\n\n```sh\nnpx create-accurapp project-name --typescript\n```\n\n\u003e **Note:** If your project fails to start right after installing, npx may be using a cached version of `create-accurapp`.\n\u003e Remove previously installed versions with `npm uninstall -g create-accurapp`\n\nOtherwise, if you have an existing javascript project and want to switch to typescript, you will just have to rename the `index.js` to `index.tsx`. On the next `yarn start`, typescript will be installed as a dependency, a `tsconfig.json` and a `types.d.ts` will be created, and you will be able to do your magic in typescript! 🧙‍♂️\n\nHere is how a basic typescript component should look like:\n\n```ts\ninterface Props {}\ninterface State {}\n\nexport class App extends React.Component\u003cProps, State\u003e {\n  state = {}\n\n  render() {\n    return \u003cdiv\u003e...\u003c/div\u003e\n  }\n}\n```\n\nSee the [Typescript JSX guide](https://www.typescriptlang.org/docs/handbook/jsx.html) for more info.\n\n\u003e **Note**: Constant enums and namespaces are not supported.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I override a webpack loader?\u003c/summary\u003e\n\nThe easiest way to override a loader is to do it inline, by prefixing the import with a `!`.\n\nFor example:\n\n```js\nimport csvString from '!raw-loader!../data/some_data.csv'\n```\nThis will override the default `csv-loader` for that file.\n\n[See the related docs](https://webpack.js.org/concepts/loaders/#inline).\n\nMake sure to disable the related eslint rule like this:\n```js\n{\n  \"extends\": \"eslint-config-accurapp\",\n  \"rules\": {\n    \"import/no-webpack-loader-syntax\": \"off\"\n  }\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWhat's all the fuss about FUSS?\u003c/summary\u003e\n\nAccurapp comes with [postcss-fuss](https://github.com/accurat/postcss-fuss), a postcss plugin that lets you generate custom functional css classes, in the [tachyons](https://raw.githubusercontent.com/tachyons-css/tachyons/master/css/tachyons.css) way. It's useful if you want to define custom colors, and don't want to write all the classes by hand. And for many other stuff.\n\nFor example, this is what you write in your `style.css`:\n\n```css\n@fuss color(tomato, #ff6347);\n```\n\nAnd this is what the generated css looks like:\n\n```css\n.tomato { color: #ff6347 }\n.bg-tomato { background-color: #ff6347 }\n.b--tomato { border-color: #ff6347 }\n```\n\nThere are other preset functions, like `color-variants()` which outputs both a lighter and darker version of the color, `color-states()` which outputs the classes in the hover active and focus pseudo-classes. You can even create your own custom modifier function!\n\n[More info in the postcss-fuss readme.](https://github.com/accurat/postcss-fuss)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I enable prettier?\u003c/summary\u003e\n\nPrettier is already configured in the projects scaffolded by accurapp, you just need to install the prettier plugin in your editor of choice and tell it to read the project's configuration.\n\nYou should also configure prettier to run on save, it is really useful especially when you paste code from stackoverflow.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eI need to support IE11. What do I do?\u003c/summary\u003e\n\nFirst of all, we're sorry for you, IE is an asshole.\n\nYou first need to edit the `package.json`'s `\"browserslist\"` field, and change `not ie 11` to `ie 11`. If you need to test in local you can also add `ie 11` to the development browsers.\n\nYou will now have to provide polyfills for the newer apis you're using, for example [the fetch polyfill](https://github.com/github/fetch), or the [css variables ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill). Or you can use [react-app-polyfill](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill) which is a collection of the most common polyfills.\n\nAlso make sure the tools you're using support IE11, for example MobX v5 has no support for IE11.\n\nNow hopefully you will not have any js errors in IE11 (if not, call Dr. Fugaro).\n\nYou still have some css fixes to do, for example flexbox behaves weirdly, [here are some tips on how to handle this issue](https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/).\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I use a web worker?\u003c/summary\u003e\n\nFor simple use-cases you can use [greenlet](https://github.com/developit/greenlet) which lets you write javascript functions in the main code and then runs them in a web worker.\n\nOtherwise, you can name your file `*.worker.js` (or `*.worker.ts` if you use typescript) and import it normally, accurapp will take care of the rest (using [worker-loader](https://github.com/webpack-contrib/worker-loader) under the hood).\n\nFor example, this is how you setup a typescript worker:\n\n```ts\n// src/myawesome.worker.ts\n\n// You can import modules in this worker\nimport { get } from 'lodash'\n\ndeclare var self: Worker\n\n// Listen to message from the parent thread\nself.addEventListener('message', event =\u003e {\n  console.log(event)\n  // Post data to parent thread\n  self.postMessage({ data: 'maronn' })\n})\n```\n\n```tsx\n// src/index.tsx\n\nimport Worker from './workers/myawesome.worker.ts'\n\nconst worker = new Worker()\n\nworker.postMessage({ data: 1000 })\nworker.addEventListener('message', event =\u003e {\n  console.log(event)\n})\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I use a service worker?\u003c/summary\u003e\n\nSince a service worker cannot be imported as a js module, you will have to put your `service-worker.js` in the `public/` folder.\n\nDoing so you **will not have any babel or typescript** transpilation in the service worker file. However you can still use ES6 since [browsers that support service workers also support ES6 out of the box](https://caniuse.com/#feat=serviceworkers).\n\nAfter having created the file, you can register it like this:\n\n```js\nif ('serviceWorker' in navigator) {\n  navigator.serviceWorker.register(`${process.env.PUBLIC_URL}/service-worker.js`)\n}\n```\n\nUsing a service worker is tricky, [read more about integrating a service-worker in a SPA](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app).\n\nIf you want to use more advanced pattern and strategies, check out [Workbox](https://developers.google.com/web/tools/workbox/), [here is its webpack plugin that might make your life easier](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eI need title and meta tags for each route for SEO. How do I do it?\u003c/summary\u003e\n\nYou can use [`react-helmet`](https://github.com/nfl/react-helmet) to dynamically add html tags to the `\u003chead\u003e` of a document and [`react-snap`](https://github.com/stereobooster/react-snap) to prerender them statically after the build process is complete. Here's how to configure them.\n\n## Install `react-helmet` and `react-snap`\n`yarn add react-helmet react-snap`\n\n## Add meta tags for each route in the `render` function\nAs specified in the [`react-helmet` documentation](https://github.com/nfl/react-helmet). E.g.\n\n```js\nexport default class Home extends React.Component {\n  render() {\n    return (\n      \u003cHelmet\u003e\n        \u003ctitle\u003eHome title\u003c/title\u003e\n\n        {/* Google */}\n        \u003cmeta name=\"description\" content=\"Home description\" /\u003e\n        \u003cmeta name=\"copyright\" content=\"Client name\" /\u003e\n\n        {/* Facebook */}\n        \u003cmeta property=\"og:title\" content=\"Home title\" /\u003e\n        \u003cmeta property=\"og:type\" content=\"website\" /\u003e\n        \u003cmeta property=\"og:description\" content=\"Home description\" /\u003e\n        \u003cmeta property=\"og:url\" content=\"Home url\" /\u003e\n        \u003cmeta property=\"og:image\" content=\"Home img url\" /\u003e\n\n        {/* Twitter */}\n        \u003cmeta name=\"twitter:image\" content=\"Home img url\" /\u003e\n        \u003cmeta name=\"twitter:title\" content=\"Home title\" /\u003e\n        \u003cmeta name=\"twitter:description\" content=\"Home description\" /\u003e\n        \u003cmeta name=\"twitter:card\" content=\"summary_large_image\" /\u003e\n        \u003cmeta name=\"twitter:site\" content=\"Client Twitter handle\" /\u003e\n\n        {/* Chrome for Android */}\n        \u003cmeta name=\"theme-color\" content=\"Hex value\" /\u003e\n      \u003c/Helmet\u003e\n\n      \u003cmain className=\"homePage\"\u003e\n        {/* Homepage content */}\n      \u003c/main\u003e\n    )\n  }\n}\n```\n\nPlease note that some of these meta can be put directly in `src/index.html`, as they are probably the same for all pages. Specifically, `copyright`, `og:type`, `twitter:card`, `twitter:site`.\n\n## Add `react-snap` in `src/index.js`\n```js\nimport { render, hydrate } from 'react-dom'\n\nrenderApp()\n\nfunction renderApp() {\n  if (rootElement.hasChildNodes()) {\n    hydrate(\u003cApp /\u003e, rootElement)\n  } else {\n    render(\u003cApp /\u003e, rootElement)\n  }\n}\n```\n\n## Add `react-snap` to `package.json`\n```js\n\"scripts\": {\n  // ...\n  \"postbuild\": \"react-snap\"\n},\n\"reactSnap\": {\n  \"puppeteerArgs\": [\n    \"--no-sandbox\"\n  ]\n}\n```\n\nNote: the puppeteerArgs avoid the build to break on the Bitbucket pipelines.\n\n## Add the `react-snap` config in `bitbucket-pipelines.yml`\nAdd it in `script`, right before `git clone --branch=\"master\"` ...\n\n```yml\n- apt-get update; apt-get install -y gettext-base;\n- echo 'deb http://dl.google.com/linux/chrome/deb/ stable main' \u003e /etc/apt/sources.list.d/chrome.list\n- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -\n- set -x \u0026\u0026 apt-get update \u0026\u0026 apt-get install -y xvfb google-chrome-stable\n- wget -q -O /usr/bin/xvfb-chrome https://bitbucket.org/atlassian/docker-node-chrome-firefox/raw/ff180e2f16ea8639d4ca4a3abb0017ee23c2836c/scripts/xvfb-chrome\n- ln -sf /usr/bin/xvfb-chrome /usr/bin/google-chrome\n- chmod 755 /usr/bin/google-chrome\n```\n\n## OK, setup done! Now, how do I check if it is working?\nRun `yarn build`. After the build is complete, you will see some folders with an `index.html` file in them. Also `react-snap` shows its progress in the terminal right after `yarn build` task is complete.\n\n## Basic troubleshooting: `react-snap` works properly, but no links are found\nYou probably forgot to add `\u003ca href=\"{dynamicLink}\"\u003e` to the page. React-snap renders all pages looking for `\u003ca\u003e` tags. It then follows the `href` to render the subsequent pages. If no `\u003ca\u003e` tags are found, then no links are crawled.\nThis is particularly important, as some routers hide their logic in an `onClick` event handler, and don't compile your links to actual `\u003ca\u003e` tags by default (e.g. `mobx-state-router`).\n\n## Basic troubleshooting: I get a weird error for 404 pages\nOn 404 pages, `react-snap` requires you to have the string `404` to be part of the `\u003ctitle\u003e`, such as\n```html\n\u003ctitle\u003e404 - Page not found\u003c/title\u003e\n```\n\nIn the future, it might be possible to overcome this limitation (for this, follow [#91](https://github.com/stereobooster/react-snap/issues/91))\n\n## Basic troubleshooting: There is unknown code in my built index.html. Is it malicious? How do I remove it?\nMost likely, it is one of the third party scripts you included in the bundle. For example, when one includes Google Tag Manager, `react-snap` executes the script and the result is put into the `index.html`.\n\nIf this is not what you wish, you can avoid `react-snap` executing that function like this:\n\n```js\nconst isSnap = navigator.userAgent === 'ReactSnap'\nif(!isSnap) {\n  // Google Tag Manager IIFE goes here\n}\n```\n\nFor more info on this, please see [userAgent](https://github.com/stereobooster/react-snap#useragent) on the `react-snap` documentation\n\n## Further troubleshooting\nPlease, refer to the documentations for [`react-helmet`](https://github.com/nfl/react-helmet) and [`react-snap`](https://github.com/stereobooster/react-snap).\n\n## What goes in the `\u003chead\u003e`?\nPlease, see [`@joshbuchea`'s head repo](https://gethead.info/).\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eI need to build for Electron. How do I do it?\u003c/summary\u003e\n\n[This guide](https://gist.github.com/matthewjberger/6f42452cb1a2253667942d333ff53404) is a good one to follow, and [here is a working example](https://github.com/nkint/accurapp-electron) of accurapp with electron. Good luck!\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eHow do I configure a multi-project repo?\u003c/summary\u003e\n\nYour best bet is to use [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/). It will solve you a lot of headaches.\n\nThis is an example `package.json`, assuming that your multiple projects are in a subfolder called `projects`.\n\n```json\n{\n  \"name\": \"main-project-name\",\n  \"private\": true,\n  \"workspaces\": [\n    \"projects/*\"\n  ]\n}\n```\n\nYarn workspaces basically puts your dependencies in just one place, at the root.\n\nThis approach allows you to require files across projects really easily. It is advised not to make a new project containing only the shared files, but rather choose a project to be the source of thruth, containing every image or UI components.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eI am getting `JavaScript heap out of memory`, what can I do?\u003c/summary\u003e\n\nYou are probably loading a very big file.\n\nYou can try increasing the max allowed memory for node with the env variable `NODE_OPTIONS=--max_old_space_size=4096`.\n\nCheck out the [Setting Env Variables](#setting-env-variables) section for info about setting env variables.\n\n\u003c/details\u003e\n\n\n## Contributing\nIf you make some edits and wish to test them locally you can run `yarn test` for an end-to-end test, or `yarn create-test-app` which creates a test app using the local packages.\n\nWhen making a commit, you have to follow the [Angular commit message guidelines](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular). This way, when making a new release, a CHANGELOG.md is automatically generated.\n\nTo publish the updated packages, run `yarn run publish`, lerna will detect the packages you changed and ask you for the new version number.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccurat%2Faccurapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faccurat%2Faccurapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccurat%2Faccurapp/lists"}