What this is
This is a ready to use template for creating modern frontend web applications.
Getting started
- Clone the repository.
npm i
npm run start
-- to start development. This will open a browser.npm run build
-- to build for production. Your files would be atbuilds/
.
Dot Env
Environment variables
Environment variables defined in .env
file would be available as the process.env
global object. You should prefix them with APP_
, e.g., APP_TEST_VAR="some value"
, which would be available via process.env.APP_TEST_VAR
.
All env variables are being parse to their native data type. Example:
APP_BOOL="true"
APP_TEST_OBJ='{"test1":"value1","test2":"value2","test3":true,"test4":["hello",123,123.56]}'
APP_ARR='["hello",123,123.56]'
APP_BOOL
will be available asprocess.env.APP_BOOL
which would be aBoolean
.APP_OBJ
will be available asprocess.env.APP_TEST_OBJ
which would be anObject
.APP_ARR
will be available asprocess.env.APP_ARR
which would be anArray
.
All process.env.APP_VAR
instances are being replaced, i.e.:
input: console.log(process.env.APP_TEST_OBJ)
output: console.log({"test1":"value1","test2":"value2","test3":true,"test4":["hello",123,123.56]})
WEBSITE_NAME
Is being used for the title in your index.html
.
Development
npm run start
The entry file is src/entry
.
You can also specify PORT
and HOST
in the .env
. Example:
HOST="dev.domain.loc"
PORT="3000"
This is where your app would be accessible during development.
Build
Inlined with index.html
By default, the main.css
is inline with index.html
. Babel runtime is also split into a separate chunk that's also inlined.
Scripts
The vendors script and the main script are split and are loaded via async. This improves loading performance on browsers.
PWA
The template is PWA enabled by default. Service worker is powered by workbox.
Dummy icons are available in public/icons
(16x16, 24x24, 32x32, 64x64, 128x128, 256x256, 512x512).
Manifest file is also available at public/manifest.json
which the index.html
already links to.
Code formatting
For code formatting the template is using eslint and prettier.
NPM scripts
- To run eslint
npm run eslint
. - To run prettier
npm run prettier
. - To run both in the proper order
npm run lint
.
Styling
Only scss
is used for styling because as of the this writing, prettier
does not support sass
.
Code splitting
You can use webpack's dynamic import BUT it does not work out of the box, you need a bridge like inferno-async-component to handle the component.
Public files
Use the public
folder on the root directory to store your public files. You can create folders there like fonts/
, css/
, images/
if you have to.
Webpack is configured to save all css files you used in your js files in the css/
folder of your build, so to avoid having two folders with only css files in them, you can also create css/
folder in the public
directory. Those files would be copied in the css/
directory of the build together with the other css files you may be using, like in font-awesome. For the fonts, save them in the public/fonts/
directory. For images
save them in the public/images
directory. For js save them in the public/js
directory. For svg files, save them in the public/svgs
directory.
Serving built files
You can serve built files after running npm run build
by running one of the following.
npm run serve:web
npm run serve:native
This feature is powered by http-server.