A template project that uses CRA with craco to adjust for the NAV infrastructure
By using this template or by following the guide bellow your project has support for:
- Typescript
- Less
- Nav-frontend support
- Zero downtime deploy with Create-React-App (CRA) setup*
npx create-react-app my-app
cd my-app
npm install @craco/craco --save
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Then add typescript and less support to the project:
- Rename
index.js->index.tsx - Rename
App.js->App.tsx - Rename
index.css->index.less - Rename
App.css->App.less
Add a craco.config.js in the root directory. The craco.config.js found in this project contains a setup that works for the NAV infrastructure
Lastly add the last craco packages and start the project:
npm install --save craco-less
npm install --save less-plugin-npm-import
npm start
Zero downtime deploy: If you are using a nais image to run your front-end application. You must ensure that the file names are the same between each deploy. By default CRA always names the js file [name].[file-hash].js and the css file [name]-[file-hash].css. This is usually good, but we need the names to stay the same when serving static files from a nais application. If not, a user can end up getting a new index.html from a new running instance, but asking the old instance for the js and css files. If the filenames are different, the user will get a 404.
Generated files: When building typescript for the first time, CRA will create a tsconfig.json file and a react-app-env.d.ts file. react-app-env.d.ts will have the following content:
/// <reference types="react-scripts" />
You can read more about this syntax here: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html