How do I run fluxible template project in production?

Question

New to webpack and fluxible, so I was trying to understand their getting started boilerplate: http://fluxible.io/quick-start.html

Running npm run dev runs fine and starts the live-reload webserver, but I was confused on how to run it in production. Looking at the package.json

  "scripts": {
    "build": "webpack & webpack --config webpack.config.production.js",
    "dev": "node webpack-dev-server.js & PORT=3001 nodemon start.js -e js,jsx",
    "lint": "eslint ./*.js ./**/*.js",
    "start": "node start.js"
  }

I assume I would run npm run build which seems to run webpack in production config mode and copies js files to the /build folder. At this point if I run npm start, it runs start.js which just points to server.js and the server is running without the dev hot loading.

My question is this: why does the app still continue to do polling (what I am assuming is the socket or polling to run the dev hot-laoder) when it's running what I am assuming is in production mode. I see this in the logs:

  express:router dispatching GET /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +3s
  express:router query  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +1ms
  express:router expressInit  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms
  express:router compression  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms
  express:router jsonParser  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms

On the production server do I just deploy the entire root folder or am i supposed to just deploy the build folder... if so the build folder would be missing things.

Are static assets supposed to be copied into the build folder- which is like the /public folder in express?

start.js

require('babel/register');
module.exports = require('./server');

server.js

import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import path from 'path';
import serialize from 'serialize-javascript';
import {navigateAction} from 'fluxible-router';
import debugLib from 'debug';
import React from 'react';
import ReactDOM from 'react-dom/server';
import app from './app';
import HtmlComponent from './components/Html';
import { createElementWithContext } from 'fluxible-addons-react';
const env = process.env.NODE_ENV;

const debug = debugLib('fluxible');

const server = express();
server.use('/public', express.static(path.join(__dirname, '/build')));
server.use(compression());
server.use(bodyParser.json());

server.use(async (req, res, next) => {
    const context = app.createContext();

    debug('Executing navigate action');

    try {
        await context.getActionContext().executeAction(navigateAction, {
            url: req.url
        });


        debug('Exposing context state');
        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

        debug('Rendering Application component into html');
        const markup = ReactDOM.renderToString(createElementWithContext(context));
        const htmlElement = React.createElement(HtmlComponent, {
            clientFile: env === 'production' ? 'main.min.js' : 'main.js',
            context: context.getComponentContext(),
            state: exposed,
            markup: markup
        });
        const html = ReactDOM.renderToStaticMarkup(htmlElement);

        debug('Sending markup');
        res.type('html');
        res.write('<!DOCTYPE html>' + html);
        res.end();
    } catch (err) {

        if (err.statusCode && err.statusCode === 404) {
            // Pass through to next middleware
            next();
        } else {
            next(err);
        }

    }

});


const port = process.env.PORT || 3000;
server.listen(port);
console.log('Application listening on port ' + port);

export default server;

How do I run fluxible template project in production?

0 Answers0