Frontend — Configuration files

On this page, we will go through how the application is configured and look at the tools used to make the development easier.

At the root of the project, there are a few configuration files to be aware of:

File	Purpose
tsconfig.json	Defines how TypeScript is to be compiled. Most settings such as target, jsx, and lib describe how to transform our TypeScript code into JavaScript.
babel.config.js	Adds additional Babel transformation to convert unsupported (at the time it was configured) JavaScript features into well-supported ones.
.eslinrc.js	Tells Eslint for which rule or convention to show an error or a warning in the case it isn't respected and to warn for possible compilation errors.
.gitignore	Tells which files and folder to be ignored by Git
.nvmrc	Defines which NodeJs version to run the code on.
prettier.config.js	Tells Prettier how to format the code, whether to use tabs or space, etc.
.prettierignore	Tells Prettier which files and folder NOT to format
jest.config.js	Configures the unit test runner Jest and tells it where to find the tests.
netlify.toml	Tells Netlify which command to run for deployments and which environment variables to use.
create-env.js	This file is specific to Netlify deployment and should be removed in the future. It enforces environment variables to be made available to the code. There are better ways to do this, but this legacy hack hasn't been got rid of yet.
.vscode/extensions.json	Lists which Visual Studio Code extensions are recommended to use with this project.
.vscode/settings.json	Defines some basic configuration for Visual Studio Code.
.storybook/main.js	Tells Storybook which stories to render and which addons to use.
.storybook/preview.js	Configures Storybook's preview window. It is a good place to wrap all your stories with React Context Providers.
.github/renovate.json	Tells Github's renovate bot how to update the repo's Npm dependencies.
.github/CODEOWNERS	Tells Github who the primary maintainers of the code are and who to automatically assign new Pull Requests to.
.github/workflows/codeql-analysis.yml	Performs general sanity checks to ensure the code is clean and doesn't contain common errors.
.github/workflows/demo-branch-sync.yml	Ensures that the demo branch is always up to date with the master branch.
.github/workflows/pumps.yml	Run a harvester that gathers new information about the pumps and saves it to the repo.
.github/workflows/test.yml	Runs the code quality checks such as type-checking, code linting, unit testing, etc.
webpack/common.config.js	Tells Webpack how to bundle the files into a browser-readbale js bundle. This file is both used in production and in development mode.
webpack/dev.config.js	Tells Webpack how to bundle the development files into a browser-readbale js bundle. This file is used only in development mode.
webpack/prod.config.js	Tells Webpack how to bundle the production files into a browser-readbale js bundle. This file is used only in production mode.
webpack/service-worker-setup.js	Creates a Mock Service Worker to be used in demo mode. This intercepts the server requests and mocks them (fakes their return value).