| Env | Url | Status |
|---|---|---|
develop |
https://develop-beam-www.netlify.app | |
staging |
https://staging-beam-www.netlify.app | |
prod |
https://beamapp.co |
- clone the repo
- run
yarn install - run
cp .env.example .env - run
yarn start:dev
You will now have a dev server running with hot reloading, always enabled for js, and for styles, based on your preferred env setting
The url to access the dev server will be displayed in the console.
Each page is a separate html template file that can be customized independently.
Add a new page by creating the corresponding html template and add the matching information to the page array in pages.js (pages are displayed in th the order defined in the array):
{
title: "The title of the page, provided to the html template through <%= htmlWebpackPlugin.options.title %>",
description: "The description of the page, provided to the html template through <%= htmlWebpackPlugin.options.description %>",
srcPath: "path/from/src.html"
}
By default, every page is injected with the index chunk, but if you need to add specific webpack chunks to a particular page, you can do so, by adding a chunks property to the page's entry:
chunks: ["index", "lottie", backlinks", ...]
NB: beware that if you add a chunks property, you have to explicitly list all the required chunks your page depends on.
Aside from title and description, the html templates also have access the prev and next page urls through <%= htmlWebpackPlugin.options.prev %> and <%= htmlWebpackPlugin.options.next %>
Any merge request against develop triggers a deploy preview on netlify to allow reviewing the build live with a shareable url.
Successfully pushing to either the develop, staging and prod branches automatically deploys the branch to the relevant url.