tradie-template-react-static-site
v6.1.0-alpha.bdb7e882
Published
Tradie template for building static sites with React.
Downloads
28
Readme
tradie-template-react-static-site
Tradie template for building static sites with React.
Installation
npm install --save-dev tradie tradie-template-react-static-siteUsage
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
{
"layout": "./layout"
}The layout directory must contain a index.jsx file. It should export two properties:
getProps- Optional. Afunctionthat 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- Anarrayofstrings. A list of style bundles extracted from the layout module and/or the page module.scripts- Anarrayofstrings. 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
import React from 'react';
export default ({root, styles, scripts, children}) => (
<html>
<head>
<meta charSet="utf-8"/>
{styles.map(
style => <link key={style} rel="stylesheet" href={style}/>
)}
</head>
<body>
<header>
<a href={root}>🏠</a>
</header>
{children}
{scripts.map(
script => <script key={script} src={script} defer/>
)}
</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
{
"pages": [
"./pages/HelloWorld"
]
}The page directory must contain a index.jsx file. It should export three properties:
getProps- Optional. Afunctionthat returns aPromise. Used to fetch any data required by the page component e.g. product information, product prices etc. May return anarrayif the page should be rendered multiple times.getPath- Required. Afunctionthat 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
export default () => (
<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.