Export a single page application as a static website. AKA Server Side Rendering without a server
yarn add -D export-static
npm install export-static --save-dev
In your package.json
file add in the scripts
section this line:
"scripts" : {
"export": "export-static"
}
then run
yarn export
or
npm run export
create a Js
file and write this into:
const exportStatic = require('export-static')
const customConfig = { exportDir : 'exportDir'}
exportStatic(customConfig)
The parameter customConfig
is optional and can be used to override the default confguration.
You can configure this tool in many ways. Any type of configuration you choose, will be merged with the default config and the other configurations you use.
You can either create the export.static.config.js
file in the root of your project or configure the path of the configuration file file using the --config argument from the command line.
When using the --config the path must be relative to the project root folder.
export-static --config "./config/custom-export-static.js"
"scripts" : {
"export" : "export-static --config './config/custom-export-static.js'"
}
export-static --routes="/ /about/ /contacts/" --port 7890 --exportDir customExportDir --sourceDir customSourceDir
When using command line arguments you can configure:
- exportDir : the output folder.
- sourceDir : the input folder (that is the build directory of your project).
- port : this tool tears up a server to render your project, and the server needs a port.
- routes to export: routes must be wrapped with quotes
"
and space
If a configuration argument is missing, the tool will use the defaults.
const exportStatic = require('export-static');
const customConfig = {
routes: [
'/',
'/about/',
'/contact/',
'/blog-post.html',
'/blog/blog-post.html',
'/a/very/nested/page.html'
]
};
exportStatic(customConfig);
When using a custom config in JavaScript the command line arguments and the export.static.config.js
will be ignored.
Any configuration passed to the program will be merged with the default config.
- The default config (hardcoded in source files) is the first to be read.
- The default config is overridden by the user config in
export.static.config.js
. - The user config is overridden by the command line config
When using this tool programmaticly in JavaScript file, if you pass a custom config Using a custom config in JavaScript files, that one will be the only used.
const defaultConfig = {
routes: ['/'],
port: 7890,
exportDir: 'export',
sourceDir: 'build',
clean: true,
browser: {
headless: true
}
};
Option | Type | Meaning | Default value |
---|---|---|---|
routes | array of string | the routues of your project to be exported | / |
port | number | the port used for running the server | 7890 |
exportDir | string | the output folder | export |
sourceDir | string | the input folder (the build folder of your project | build |
clean | boolean | if true the output dir will be erased and re-created each run |
true |
browser.headless | boolean | if false yoou'll see the browser, otherwise it will be headless |
true |
This tool is able to export /about
, /about/
, /about.html
, /any/nested/path
and even /any/nested/path/about.html
.
Routes that does not serve a .html
file, such as /about
or /any/nested/path
, will be exported to : /about/index.html
or /any/nested/path/index.html
This means that Google bot, and any other bot, will index the page with the url /about/
(with the trailing slash).
This means that when users find the About page on Google, they land on /about/
(with the trailing slash).
This means that your (React|Vue|Angular|*) Router should math /about/
(with the trailing slash) and not /about
(without the trailing slash).
If the Router matches /about
(without the trailing slash) the users could get:
- Not found (
404
) if your router does not match the route. - Redirect (
301
or302
) if your router is smart enough to understand the situation. Which is better of a404
but,as far as I know, not really SEO friendly.
Avoid inline <style>, because each page you export will have the same inline CSSs. Try to put your styles in external CSS files.
Since the page is already rendered try to use async
or defer
on your <script> tags.
git clone https://github.com/Spyna/export-static.git && cd export-static
yarn install
#npm install
To run the project locally you have to
yarn build:watch
The example folder contains a React project that can be used to test the project.
The file package.json
under example contains two scripts:
export:cli
: runs the project by the command lineexport:script
: runs the project by the JavaScript file "scripts/export.js".
Before running any of these scripts be sure to build the example project using yarn build
. This step is needed because the project uses the build
directory.
When using the script export:cli
you have to pass the routes to export so the command will be:
yarn export:cli --routes="/ /about/ /contact/ /blog-post.html /blog/blog-post.html /a/very/nested/page.html"
yarn test:watch
yarn test:coverage
Happy hacking.