Your Project's Title...
Nedbank's personal banking site
Environments
Installation
npm i
Tests
npm tst
.less
files to .css
Compile all npm run lessc
The above command will run less-watch-compiler --run-once styles styles & less-watch-compiler --run-once blocks block
which will compile all *.less
files to *.css
files in styles
and blocks
folders.
Run less auto-compile and Franklin Pages together
npm run hlx
The above command will run less
compiler in watch mode (i.e. watching for any changes in the *.less
files in the current directory and all its descendents and compiling those changes to *.css
).
And in parallel, it will also start up your local Franklin Pages development environment with hlx up
command.
Note on LESS usage and Franklin Local Development
The npm run hlx
will parse the styles
and blocks
directory for any .less
files. Files that are found will be compiled to css and saved in the same location and name with a .css
extension. It will then continue to watch for changes to .less
files and will compile to their associated CSS files on changes.
Examples:
{repo}/blocks/header/header.less
will compile to{repo}/blocks/header/header.css
{repo}/styles/style.less
will compile to{repo}/styles/styles.css
As both less-watch-compile
and hlx up
are watching for changes, changes made to your less files while using the npm run hlx
command will be reflected automatically in your localhost.
Note that using only the hlx up
command will not trigger updates on-change for less files.
Local development
- Create a new repository based on the
helix-project-boilerplate
template and add a mountpoint in thefstab.yaml
- Add the helix-bot to the repository
- Install the Helix CLI:
npm install -g @adobe/helix-cli
- Start Helix Pages Proxy:
hlx up
(opens your browser athttp://localhost:3000
) - Open the
{repo}
directory in your favorite IDE and start coding :)