Skip to content
Snippets Groups Projects
README.md 5.71 KiB
Newer Older
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed
# CE naming web UI
Alexander Madsen's avatar
Alexander Madsen committed

Anders Lindh Olsson's avatar
Anders Lindh Olsson committed
This project is meant to be the web User Interface for the CE naming tool. The project is written in ReactJS.

## Developing environment
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

- NodeJS and npm
- IDE for JavaScript developement (e.g. Visual Studio Code)

(For developing purposes it is suggested to use _Node Version Manager_ [NVM] which makes easy to change between different Node versions).
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

- Windows: https://github.com/coreybutler/nvm-windows
- Mac/Linux: https://github.com/nvm-sh/nvm

### Required versions
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

- Node: v20+
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed
- npm: v6.10+
Imre Toth's avatar
Imre Toth committed
### [Pre-Commit](https://pre-commit.com/)

#### Installation
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

You will need to install pre-commit first locally on you machine, the install it in you project, instructions on how to do this you can find here: https://pre-commit.com/#install
Imre Toth's avatar
Imre Toth committed

By running `pre-commit run --all-files` pre-commit will run both eslint and prettier on all files in src, much like the scripts from the package.json

# Local development setup

## Installing Dependencies

This project includes private dependencies from Artifactory, so additional configuration is required.

1.  Create an `.npmrc` file based on the example provided in this registry, substituting your email and base64 credentials.
1.  Install dependencies with `npm ci`.

Note, we lock dependency versions with _package-lock.json_; please install dependencies with `npm ci` (not npm install) to avoid overwriting the package-lock.
Imre Toth's avatar
Imre Toth committed

## Updating the API Files

This project uses `@rtk-query/codegen-openapi` to auto-generate the naming api from its OpenAPI spec. To generate the spec:

1. Download the new API file and put it in the root of this project, name it `api.json`.
1. Run `npm run generate-api` to update the api file; see `openapi-config.json` for path information.
1. Commit the changed file.

## Useful links to start developing in ReactJS

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

## [ESLint](https://eslint.org) & [Prettier](https://prettier.io)
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

Linting can be checked, and to some extent auto fixed by running following scripts:

### `npm run lint`
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

will run `npx eslint src` which will run eslint on all files in the src directory and write out the results of the check in your console.

### `npm run lint:fix`
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

will run `npm run lint -- --fix` which will run eslint on all files in the src directory and fix what can be auto fixed and write out the rest of the results of the check, of what could not be auto fixed, in your console.

### `npm run prettier`
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

will run `npx prettier src --check` which will run prettier on all files in the src directory and write out which files would be changed in your console.

### `npm run prettier:fix`
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

will run `npm run prettier -- --write` which will run prettier on all files in the src directory and write out which files have be changed in your console.

### `npm run format`
Anders Lindh Olsson's avatar
Anders Lindh Olsson committed

will run `npm run prettier:fix && npm run lint:fix` which will run lint:fix and the prettier:fix scripts mentioned above.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

[https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

[https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

[https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

[https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

[https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

Anders Lindh Olsson's avatar
Anders Lindh Olsson committed
[https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)