tradie-template-react-static-site
Tradie template for building static sites with React.
Installation
npm install --save-dev tradie tradie-template-react-static-site
Usage
Creating the layout
The layout defines the template which each page is rendered into.
The the layout may exist anywhere within the ./src
directory. You will need to tell tradie
which directory the layout lives in:
./src/site.json
The layout directory must contain a index.jsx
file. It should export two properties:
getProps
- Optional. Afunction
that returns aPromise
. Used to fetch any data required by the layout component.default
- Required. AReact.Component
. Used to render the page into, usually including the<head/>
,<body/>
and any other components common to every page page.
The layout component will receive the following props:
root
- Astring
. The path of the root directory.styles
- Anarray
ofstrings
. A list of style bundles extracted from the layout module and/or the page module.scripts
- Anarray
ofstrings
. A list of script bundles used by the layout module and/or the page module.children
- Anode
....
- Any other props returned bygetProps()
.
Styles
Any styles imported by the module (e.g. import './index.css';
) will be extracted as an external CSS file.
Scripts
The layout directory may contain a script.js
file. This file and its dependencies will be transpiled and bundled for use on the client.
Styles imported in this file will not be extracted and will remain in the JS bundle.
Example
./src/layout/index.jsx
; <html> <head> <meta charSet="utf-8"/> styles </head> <body> <header> <a href=root>🏠</a> </header> children scripts </body> </html>;
Creating a page
A page defines the content of each page.
The the page may exist anywhere within the ./src
directory. You will need to tell tradie
which directory the page lives in and where the rendered page should be output:
./src/site.json
The page directory must contain a index.jsx
file. It should export three properties:
getProps
- Optional. Afunction
that returns aPromise
. Used to fetch any data required by the page component e.g. product information, product prices etc. May return anarray
if the page should be rendered multiple times.getPath
- Required. Afunction
that returns astring
. Used to get the path of the rendered file. Will be called multiple times ifgetProps()
returns anarray
.default
- Required. AReact.Component
. Used to render the page.
A page component will receive the following props:
root
- Astring
....
- Any other props returned bygetProps()
.
Styles
Any styles imported by the module (e.g. import './index.css';
) will be extracted as an external CSS file.
Scripts
The page directory may contain a script.js
file. This file and its dependencies will be transpiled and bundled for use on the client.
Styles imported in this file will not be extracted and will remain in the JS bundle.
Example
./src/pages/HelloWorld/index.jsx
<div> <h1>Hello world!</h1> </div>;
Commands
tradie build
Will lint, transpile, bundle and render your pages into the ./dist
directory.
tradie build --watch
Will lint, transpile, bundle and render your pages into the ./dist
directory whenever a source file changes.
tradie build --optimize
Will lint, transpile, bundle, minify and render your pages into the ./dist
directory.
tradie serve
Will lint, transpile, bundle and render your pages into the ./dist
directory, and serve the directory at http://localhost:3000
.
tradie test
Will lint, transpile, bundle and run your *.test.{js,jsx}
files.
tradie test --watch
Will lint, transpile, bundle and run your *.test.{js,jsx}
files whenever a source file changes.