Adding color output to prerender script and relocating to script

This commit is contained in:
Jeff Avallone 2018-02-16 17:16:23 -05:00
parent d69ab00ad5
commit 3fdc74bdf2
4 changed files with 12 additions and 8 deletions

2
.gitignore vendored
View File

@ -20,7 +20,7 @@ node_modules/
# Build output # Build output
build/ build/
prerender/ script/__build__/
# Coverage reports # Coverage reports
coverage/ coverage/

View File

@ -15,7 +15,7 @@
"start:http-server": "http-server ./build", "start:http-server": "http-server ./build",
"build": "cross-env NODE_ENV=production run-s build:webpack build:prerender", "build": "cross-env NODE_ENV=production run-s build:webpack build:prerender",
"build:webpack": "webpack --config webpack.prod.js", "build:webpack": "webpack --config webpack.prod.js",
"build:prerender": "node ./prerender/prerender.js", "build:prerender": "node ./script/__build__/prerender.js",
"test": "run-s test:lint 'test:unit --coverage'", "test": "run-s test:lint 'test:unit --coverage'",
"test:unit": "jest", "test:unit": "jest",
"test:lint": "eslint --ignore-path .gitignore .", "test:lint": "eslint --ignore-path .gitignore .",

View File

@ -1,10 +1,14 @@
// NOTE: This script *MUST* be built with webpack since it requires React
// components. The script is built and run as part of `yarn build`
import React from 'react'; import React from 'react';
import { renderToString } from 'react-dom/server'; import { renderToString } from 'react-dom/server';
import fs from 'fs'; import fs from 'fs';
import util from 'util'; import util from 'util';
import cheerio from 'cheerio'; import cheerio from 'cheerio';
import colors from 'colors/safe';
import './i18n'; import 'i18n';
const readdir = util.promisify(fs.readdir); const readdir = util.promisify(fs.readdir);
const readFile = util.promisify(fs.readFile); const readFile = util.promisify(fs.readFile);
@ -13,7 +17,7 @@ const writeFile = util.promisify(fs.writeFile);
readdir('./src/pages') readdir('./src/pages')
.then(pages => ( .then(pages => (
Promise.all(pages.map(async page => { Promise.all(pages.map(async page => {
const Component = (await import(`./pages/${ page }/Component`)).default; const Component = (await import(`pages/${ page }/Component`)).default;
const pagePath = `./build/${ page }.html`; const pagePath = `./build/${ page }.html`;
const markup = cheerio.load(await readFile(pagePath)); const markup = cheerio.load(await readFile(pagePath));
@ -21,11 +25,11 @@ readdir('./src/pages')
markup('#root').html(renderToString(<Component/>)); markup('#root').html(renderToString(<Component/>));
await writeFile(pagePath, markup.html()); await writeFile(pagePath, markup.html());
console.log(`${ page } prerendered`); // eslint-disable-line no-console console.log(colors.green.bold('PRERENDERED:'), `${ page }.html`); // eslint-disable-line no-console
})) }))
)) ))
.then(() => console.log('Done prerendering')) // eslint-disable-line no-console .then(() => console.log('Done prerendering')) // eslint-disable-line no-console
.catch(e => { .catch(e => {
console.log(e.toString()); // eslint-disable-line no-console console.error(colors.red.bold('FAIL:'), e); // eslint-disable-line no-console
process.exit(1); process.exit(1);
}); });

View File

@ -27,12 +27,12 @@ module.exports = [
whitelist: [ /\.svg$/ ] whitelist: [ /\.svg$/ ]
})], })],
entry: { entry: {
prerender: './src/prerender.js' prerender: './script/prerender.js'
}, },
output: { output: {
filename: '[name].js', filename: '[name].js',
chunkFilename: '[name].chunk.js', chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname, 'prerender') path: path.resolve(__dirname, 'script/__build__')
}, },
resolve: { resolve: {
modules: ['src', 'node_modules'] modules: ['src', 'node_modules']