@equinor/opt-core NPM

@equinor/opt-core

Core dependency that manages all the scripts and configuration in order to have an OPT react frontend application.

You can generate an opt react app using our tool Create OPT App.

Advanced Configuration

You can adjust various development and production settings by setting environment variables in your shell or with .env.

Note: To create custom environment variables, you must begin with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

The list of the environment variables are:

Base server configuration:

HTTPS: if the webpack must use https, only used for development, false by default.
HOST: the host where to execute the application. 0.0.0.0 by default.
PORT: the port where to execute the application. 3000 by default.
COOKIE_SECRET: the cookie secret used by the express server.
SESSION_SECRET: the session secret used by the express server.
API_URL: the api url.

Active directory configuration:

AD_ROUTES_ENABLED: enable the Windows Azure Active Directory Authentication server routes. false by default.
AD_CLIENT_ID: the Azure Active Directory Authentication client id.
AD_CLIENT_SECRET: the Azure Active Directory Authentication client secret.
AD_TENANT: the Azure Active Directory Authentication tenant (dedicated and trusted Azure Active Directory's instance).
AD_RESOURCE: the Azure Active Directory Authentication resource.

Browser history:

HISTORY_API_MIDDLEWARE: Enable the history api middleware. Use it only if you want a redux browser history. false by default.
REACT_APP_REDUX_BROWSER_HISTORY: Enable the browser history on redux, false to use a hash history. false by default.
Use this option if you need to keep the req.headers.referer on the server. For example to redirect the user to the page he request or was after a login is required.
This option is useful if you are using the skeleton from create-opt-app, if you are not this option is probably useless and you can safely remove it.

Azure Application Insights key:

REACT_APP_INSIGHTS_INSTRUMENTATION_KEY: Azure Application Insights key. If a key is provided it will enable the application insights, see more on appinsights.

Webpack configuration:

GENERATE_SOURCEMAP: if the webpack should generate the source map files when compile to production. true by default. When set to false, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.
IMAGE_INLINE_SIZE_LIMIT: The limit to get the images using the url-loader. 10000 by default. By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.
INLINE_RUNTIME_CHUNK: If the runtime script need to be embed into to the index.html. true by default. By default, the runtime script will be embed into the index.html during the production build. When set to false, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.
DISABLE_NEW_JSX_TRANSFORM: Disables the new JSX transform introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. false by default.
ESLINT_NO_DEV_ERRORS: if the webpack should emit errors as warnings. false by default. When set to true, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay.
DISABLE_ESLINT_PLUGIN: Disable the eslint webpack plugin. false by default.
FAST_REFRESH: Whether or not react-refresh is enabled. true by default.

CI: When set to true, treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.

CLI scripts

The next cli scripts are available:

`opt-core-scripts dev`

Runs the app in the development mode. Open 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.

`opt-core-scripts build`

Builds the app for production to the dist 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 production!

`opt-core-scripts prod`

Runs the app in the production mode, to run this mode it is necessary to build the app first. Open http://localhost:3000 to view it in the browser.

`opt-core-scripts test`

Launches the test runner in the interactive watch mode.

`opt-core-scripts deduplicate`

Cleans up yarn.lock by removing duplicates.

A duplicate package is when two dependencies are resolved to a different version, even when a single version matches the range specified in the dependencies.

`opt-core-scripts lint`

Runs the linter to check the errors in the javascript code. It can be run in 3 modes:

opt-core-scripts lint: it will check all the files and show a list of the errors.
opt-core-scripts lint --mode ci: it does the same as the lint but it will not generate a cache like opt-core-scripts lint and opt-core-scripts lint --mode fix.
"opt-core-scripts lint --mode fix: it will try to fix automatically the errors in the code, useful to remove errors such as double blank lines, etc

`opt-core-scripts prettier`

It will make the code prettier, it support 2 modes:

opt-core-scripts prettier: It will only check the files that need to be prettified and show a list.
opt-core-scripts prettier --mode write: It will check and transform the necessary files for you.

Overriding configurations

Override webpack configuration

To override or extend a webpack configuration simply add a webpack.config.js file into the root of the application folder.

Override babel configuration

To override or extend the babel configuration simply add a .babelrc or babel.config.js file into the root of the application folder.

Keep in mind, that all the new configurations will be merged and replace the base ones.

Required folder structure

You can use this dependency into your own project but, the folder structure must have the required files:

my-app/
├─ public/              --> [Required folder] static assets that need to be load before the webpack.
├─ server/
│  ├─ index.js          --> [Required file] express server routing point.
├─ src/
│  ├─ index.html        --> [Required file] html template
│  ├─ index.tsx         --> [Required file] Application entry point

The Application entry point doesn't need to be typescript, it just need to be a valid javascript file (js, jsx, tsx, etc)

Commit messages

By default using @equinor/opt-core will expect you to use git commit messages based on Conventional Commits.

You can disable it by removing the file:

./husky/commit-msg

Or if you want or have extended this hook, just remove the line:

yarn commitlint --edit $1
// or
npx --no-install commitlint --edit $1

We strongly recommend to follow the conventional commit that is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of.

For example, using conventional commits makes easy to integrate with github actions in order to create github releases and the next version number based on the commit messages.

OPT react