Create OPT App tool
Create apps with no build configuration for Equinor OPT projects.
Creating an App
You’ll need to have Node 14 or later version on your local development machine. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.
To create a new app:
npx @equinor/create-opt-app ./my-app [options]Use the option
-hto see the list of available options.
The tool will generate the initial project structure and install the transitive dependencies. The initial project will use typescript. We strongly recommend to use it but you don't need to if you don't want it.
Folder structure
Once an application is generated you will found the next folder structure:
my-app/
├─ node_modules/
├─ public/ --> [Required folder] Static assets that need to be load before the webpack.
│ ├─ favicon.ico
│ ├─ logo192.png
│ ├─ logo512.png
│ ├─ manifest.json
│ ├─ robots.txt
├─ server/
│ ├─ index.js --> [Required file] express server routing point.
├─ src/
│ ├─ assets/ --> assets that need to be load with webpack to be accesible in the components (like svg images)
│ ├─ components/ --> Global components to be used in any page.
│ ├─ hooks/ --> Global hooks to be used in any page.
│ ├─ models/ --> Typescript models definitions to be used within an api
│ ├─ pages/
│ │ ├─ App.tsx --> Application pages entry point
│ ├─ routes/
│ │ ├─ index.tsx --> Routes definitions
│ ├─ services/
│ ├─ state/
│ │ ├─ index.tsx --> Store provider
│ │ ├─ store.ts --> Redux store
│ ├─ styles/
│ ├─ utils/
│ ├─ index.html --> [Required file] html template
│ ├─ index.tsx --> [Required file] Application entry point
│ ├─ react-app-env.d --> TypeScript types declarations for importing resource files such as bmp, gif, jpeg, jpg, etc.
├─ .env --> environmental variables.
├─ .gitignore
├─ package.json
├─ README.md
├─ tsconfig.json
No configuration or complicated folder structures, only the files you need to build your app
User Guide
Create opt app uses @equinor/opt-dev and @equinor/opt-serve to manage all the development tools/configuration and production server.
Philosophy
-
One Dependency: There is only one build dependency. It uses webpack, esbuild, SWC, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
-
No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
What’s Included?
Your environment will have everything you need to build a modern single-page React app:
- React, JSX, ES6, TypeScript support.
- Language extras beyond ES6 like the object spread operator.
- Autoprefixed CSS, so you don’t need
-webkit-or other prefixes. - A jest test pre-configured environment.
- A live development server that warns about common mistakes.
- A live production server.
- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
- An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
- Hassle-free updates for the above tools with a single dependency.
Commit messages
By default using @equinor/create-opt-app will configure the project in order 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.
The git hooks are managed through husky. You can deactivate all the git hooks by removing that dependency.