I currently have some trouble setting up my Node/React/Webpack app. I'm using react-static-boilerplate as the base and now I'm trying to get the publish script to work. I want to use the Github Pages upload like described in one of its documents. Some major differences between the method described in the document and the method I want to use:
- I want the publish task to be in
tools/publish.js
, not intools/run.js
. - I want to use the gh-pages node package instead of chaining Git calls.
This is my current tools/run.js
:
const fs = require('fs');
const ejs = require('ejs');
const rimraf = require('rimraf');
const webpack = require('webpack');
const Browsersync = require('browser-sync');
const task = require('./task');
const config = require('./config');
const path = require('path');
global.HMR = !process.argv.includes('--no-hmr'); // Hot Module Replacement (HMR)
// Build the app and launch it in a browser for testing via Browsersync
module.exports = task('run', () => new Promise((resolve) => {
rimraf.sync('public/dist/*', { nosort: true, dot: true });
let count = 0;
const bs = Browsersync.create();
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
// Node.js middleware that compiles application in watch mode with HMR support
// http://webpack.github.io/docs/webpack-dev-middleware.html
const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: webpackConfig.stats,
});
compiler.plugin('done', (stats) => {
// Generate index.html page
const bundle = stats.compilation.chunks.find(x => x.name === 'main').files[0];
const template = fs.readFileSync('./public/index.ejs', 'utf8');
const render = ejs.compile(template, { filename: './public/index.ejs' });
const output = render({ debug: true, bundle: `/dist/${bundle}`, config });
fs.writeFileSync('./public/index.html', output, 'utf8');
// Launch Browsersync after the initial bundling is complete
// For more information visit https://browsersync.io/docs/options
count += 1;
if (count === 1) {
bs.init({
port: process.env.PORT || 3000,
ui: { port: Number(process.env.PORT || 3000) + 1 },
server: {
baseDir: 'public',
middleware: [
webpackDevMiddleware,
require('webpack-hot-middleware')(compiler),
require('connect-history-api-fallback')(),
],
},
}, resolve);
}
});
}));
This is my current tools.publish.js
:
const path = require('path');
const firebase = require('firebase-tools');
const build = require('./build');
const task = require('./task');
const config = require('./config');
module.exports = task('publish', () => {
const ghPages = require('gh-pages');
global.DEBUG = process.argv.includes('--debug') || false;
const publish = (dir) => new Promise((resolve, reject) => {
ghPages.publish(dir, {}, (err) => {
if (err) {
reject();
} else {
resolve();
}
});
});
return Promise.resolve()
.then(() => run('clean'))
.then(() => run('build'))
.then(() => publish(path.join(__dirname, 'public')));
});
When I run npm run publish
, it says
> node tools/publish.js
Starting 'publish'...
ReferenceError: run is not defined
at Promise.resolve.then (/home/****/tools/publish.js:32:21)
at process._tickCallback (internal/process/next_tick.js:109:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:390:7)
at startup (bootstrap_node.js:150:9)
at bootstrap_node.js:505:3
I don't know where to take run
from. I can add const run = require('./run');
to tools/publish.js
, but this will just create two BrowserSync sessions when I execute tools/publish.js
.
Side note: I am pretty new to Node/React/Webpack. Even if you can't help me on this one, any tips in the comments are appreciated. Have a nice day!
via jd34
No comments:
Post a Comment