Monday, 29 May 2017

Setting up gh-pages task on node.js

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 in tools/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