navi-tool v0.7.0
navi-tool
Build static websites with navi, with one HTML file for each URL.
Install it
npm install navi-tool
Example
To render your website, navi-tool needs two things:
- A file which exports a
renderToString({ junction, location, dependencies, meta }) => string
function (which can be async) - Your site's public folder, which contains the built version of your app (without any HTML files)
The filename within your public directory that contains the "main" file, which should set two globals:
main()
- a function to start your approotJunction
- your app's root junction
Then, building your site is simply a matter of calling the command line utility, which will load the junction and walk through each of its nodes, rendering a file to the public directory as it goes.
node_modules/.bin/navi --public public --main public/main.js --render src/renderToString.js
Of course, repeatedly typing these command line options would soon become frustrating, so you can also specify the options in a "navi.config.js" file:
export default {
public: 'public',
main: 'main.js',
renderToString: 'src/renderToString.js',
}
Integrating with create-react-app
Integrating navi-tool with create-react-app is simple. You don't even need to eject!
- wrap the bootstrap code in index.js in a
main
function, which is placed on the globalwindow
object - export a root junction from index.js
- at the bottom of index.js, call
main
if we're running in the dev server:
if (!process.env.REACT_APP_STATIC) {
main()
}
While you'd usually also need to supply a render
file, navi-tool includes one that works with create-react-app - to use it, just pass the --render create-react-app
option to navi
.
Then update the build
script in package.json
:
"build": "cross-env REACT_APP_STATIC=true && react-scripts build && navi build --output build --main build/static/js/main.*.js --render create-react-app"
And now, when you run npm run build
, you'll get one file for each of your app's URLs!
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago