Basic demo example for Cloudflare Pages

Branch

main

Build Command

npm run build-all

Build Output Directory

/dist

Root Directory

/

Customizing any of the primary assets generated by the demo-pages package can be done in the asset-specific directories:

- src
    - build-html/
    - build-js/
    - build-css/

HTML is generated using PugJS. More documentation on how to use Pug can be found in their developer documentation at https://pugjs.org/.

The relevant directories and assets for modifying HTML are the following:

- src/
    - build-html/
        - templates/
            home-content.json   # JSON content used for markup interpolation in home-markup.pug
            home-content.pug    # Main Pug markup templates
        - build-home-html.js    # Node script responsible for rendering and building dist/main.html

Testing the HTML rendering can be done by running npm run build-html inside the root project directory

The client-side scripts are bundled using Webpack (https://webpack.js.org/) using the require() syntax.

The relevant directories and assets for modifying HTML are the following:

- webpack.config.js             # main webpack configuration file
- src/
    - build-js/
        - helpers/
            helper-script.js    # example helper module
        - build-home.js         # Main JS file

Testing the JS build process can be done by running npm run build-js inside the root project directory

The Stylesheet(s) are precompiled using node-sass and are written in the Sass/SCSS syntax; more information can be found here: https://sass-lang.com/

- src/
    - build-css/
        - main.scss             # Main stylesheet rules

Testing the stylesheet build process the stylesheets can be done by running npm run build-css inside the root project directory