How to use this package?
This package can be used at multiple levels, from low to high:
High Level API
- The scripts from
src/scripts
can be directly used as an npm script field.
Mid Level API
- The Webpack config files can be used to quickly setup some build/dev scripts by importing
createConfig
orcreateDevConfig
fromsrc/configs
. - Some useful utility functions include
createEnvironmentHash
that can be used in other packages in different scenarios.
Low Level API
- If you want to write a custom Webpack config:
- To handle different file types while using Webpack you can look in
src/configs/loaders/*
. - Some modules provide utilties that can be used in packages for build or non-build related purposes:
-
choosePort
- This helps you find a free port given a default port. -
src/utils/consoleHelpers.ts
- Provides helper functions such asclearConsole
.
-
- To handle different file types while using Webpack you can look in
Scripts
-
The
dev-atri-app
is used to start Atri's development server. -
The
create-atri-app
is used to create a new Atri project.
Add environment variables to client side code
All the environment variables that needs to be embedded in the application (client side) must start with ATRI_APP_
. Some environment variables are available to client side by default such as NODE_ENV
.
You can also use .env
file or .env.${MODE}.local
files to specify environment variables (again, variables that start with ATRI_APP_
will only be available on client side).
Working details
The src/utils/extractParams.ts
has a function with the same name that helps extract the required information for a build process from different sources such as environment variables, command line arguments and build.config.js
. All the scripts from src/bin
call extractParams()
to extract these necessary information.
index.html
Generate Geneartes index.html
when generateIndexHtml
is set to true
.
Features
- Supports react refresh.
- Add middlewares to webpack dev server.
- Proxy requests to your server (both HTTP/S & ws).
- A webpack dev server behind a proxy can also be used.
- Supports typescript and many other file types.
Notes
- The
_document
is used only in server side to generate HTML.