Is it possible to use browsersync and nodemon with this setup?

I created a dist folder and referenced it directly from my html file with a <link> tag. That worked. But that's certainly not how it's intended, since the dist directory is on .gitignore by default, right?

The same applies to images / fonts and so on. How to reference them?

This eslint plugin lints against APIs that are only supported by target browsers 🎉 Would a PR for this be welcome?

Here's a demo of it in action

I ran npm run build and started the sever. The console this error:

locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration.

When running npm build nothing happens

What is the problem here?

Setting the process.env.NODE_ENV this way

After running npm start I get this:

Bundling...
Server running on port 3000
Bundling project, please wait...
Bundled in 1441140904826ms!
[Error: Must provide a proper URL as target]
{ [Error: socket hang up] code: 'ECONNRESET' }

Everything seems to run fine though...

Is the boilerplate only intended to live update if the server code is updated? If I update anything in the app folder I need stop and restart server.js

I really like what you've done with this. I'm still learning react (having come from a ruby/rails and angular background). I'm wondering how you handle getting requests from an external API?

I'm looking at this article here: https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.wcor87ig4

And the server.jsx file is substantially different then yours. How would you handle something like that? Would it be the same way?

EDIT: The reason I'm asking is because the app we are building will be talking a lot to a main ruby/rails API and won't be handling any data locally (or very minimal). So this is something that is weighting heavily on us.

I am trying to see how I can use this in my project and having trouble when I run npm start.
npm-debug.txt

Regards,
jkanive

Today is my first day trying to build something with Node, so please bear with and let me know if this is a stupid question or I'm missing something obvious.

I am trying to deploy this boilerplate to Elastic Beanstalk. AWS has a prebuilt stack for a bunch of languages, and so I'm just relying on the default Node stack. It deploys successfully out of the box, but dependencies are not found and I get this error at https://github.com/christianalfoni/webpack-express-boilerplate/blob/master/server.js#L4:

Error: Cannot find module 'express'

If I move it into the main dependencies block then it fails on the next missing dependency. I guess the question is, how is this expected to work for production/staging deployments? Either I should be configuring EB to use the devDependencies or the server-side requirements should be in the main dependencies block. What is the intended usage here?

Hello,

first of all thanks for this. it's awesome and I hope I can use it for my future projects :) I'm having a problem deploying to Heroku. I was wondering if you could help me :/ it seems the port cannot be resolved? I added the deploy.js script and the script instructions on the package.json as you said on your article. Could you please take a look at my server.js file? thanks in advance! (I just started with web dev)

https://github.com/gordillo99/fixo

Hey Christian, I've been starting the server with sudo npm start but this doesn't seem to include live reloading. Is it me? Thanks for this awesome boilerplate! Definitely a great way to get something going fast.

I'm trying to make a call to the Yelp API, but keep getting the following error:

XMLHttpRequest cannot load https://api.yelp.com/v2/search?term=food&location=new%20york. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.

Any suggestions on how to work around this?

I apologize if this is a stupid question. I’m just about to start using Webpack for my Express web app.

In server.js, I see that webpack, webpack-dev-middleware, and webpack-hot-middleware are required at the top of the file, unconditionally.

const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

Shouldn’t these statements be inside the if (isDeveloping) branch? Otherwise, Webpack runs on the actual web server in production, if I understand correctly.

The webpack loader doesn't compile .jsx files with the babel loader.
Adjusting the test param from .js$ to .jsx?$ should do the trick.

It took me almost 15 minutes (mostly reading your tutorial) to figure out how exactly you were intending to run the development server. I highly recommend that you put a short, simple solution in your readme.

Everything seems to be working great! Just getting a single error...

And when I open it up, the console tells me...

Has anyone ran into this error before? Thanks!

ERROR in ./app/main.js
Module build failed: ReferenceError: [BABEL] C:\Users\mark.pieszak\Documents\Github-other\webpack-express-boilerplate\app\main.js: Unknown option: direct.presets

I have all right babel-loaders & presets installed, not sure what else it needs.

• npm start
• open app in browser and bring up console
• change something in main.js
  console:

process-update.js?e13e:55 [HMR] The following modules couldn't be hot updated: (Full reload needed)
process-update.js?e13e:60 [HMR]  - ./app/main.js
process-update.js?e13e:91 [HMR] Reloading page

But page doesn't reloaded.

Awesome boilerplate, thanks for putting it together.

I got everything to work and started adding some React components. A few loaded fine. Now any changes to my html (or anything) aren't be updated and there's no error to help. Things I've tried:

1. Quitting process and running NPM start
2. Running Webpack --watch
3. Opening in different brower
4. Restarting

Nothing seems to work. Been combing through Google and nothing seems to work. Any help would be awesome.

Always when using this boilerplate I get like 500 of these warning messages on boot:
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead

What is this and how to get rid of it?

There is no postinstall script in package.json. Local npm run build is not pushing generated files from dist to heroku remote.

Hi, I was wondering how you run the server in production? Something like this?

node server.js NODE_ENV=production PORT=xxxxx

Since babel-node isn't supposed to run in production, how do you transpile the ES6 in the server.js then?

the current configuration doesn't bundle the nodejs server side code, therefore in order to run the production bundled code you need to run it via babel-node, which is not production ready due to the heavy runtime compiling.
please advice what should be done in order to have this project ready for production? i saw solutions that created two webpack configuration for frontend and backend and using gulp building both projects,
any other ideas?

--- delete

Is it possible to have express reload when files change? How would that be incorporated into this workflow?

Just wondering if there was an example showing how to bundle this setup for deploying to firebase housing. There are pantry of examples just fit express itself, but I think this setup up is more unique.

Hello

Is it possible to add example on how can I add api routes where I can get data from database form example? I tried to add
app.get('/api/lol', function response(req, res) {
res.write("looooooooooool");
});
to server.js and call it with jQuery
$.get('/api/lol', function(result) {
console.log(result);
});
but Im not getting anything back.

Hello Christian,

I would like to know what are the main differences between vesparny's starter pack and yours. Besides the extra packages he is using; like react-router, normalize.css, fastclick, history, and others dev packages, I would like to know if yours has better performance over his or it is just a slim down version.

I will use react-router, so I dont know if going with your pack and implement react-router and other packages, or just start with vesparny's version.

Can you please give me some advice? Thank you.

Sometimes console logs out Error: ENOENT, stat '/home/ubuntu/workspace/dist/index.html'

This currently only reloads when there's a change in react app. I am planning to do most of back end work in Express itself and would need to code the APIs there. In such use case, I would need even the server side code to reload itself after every change. How is this possible with this setup?

When I put a link css to index.tpl.html
I got this error Resource interpreted as Stylesheet but transferred with MIME type text/html: "..."

And I'm unable to use css.

With this boiler plate when Im using fat arrow function they are not working. Seems like babel is not transformin them to es5. I have tried to edit babelrc file with no luck. Can somebody confirm this or is it just my issue?

change App.js to this:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test: 'foo'};
  }
  render() {
    return (
      <div className={styles.app}>
        {this.state.test}
      </div>
    );
  }
}

then run npm start

now , if we change

return (
      <div className={styles.app}>
        {this.state.test}
      </div>
    );

to

return (
      <div className={styles.app}>
        {this.state.test} hello
      </div>
    );

the browser refreshes correctly.

but if we change

this.state = {test: 'foo'};

to

this.state = {test: 'bar'};

the browser content does not refresh although in console you can see some logging in the console stating that it is refreshing.

not sure if this is a bug in the middleware or configuration though.

Hi Christian,

First off, awesome starting point for a Webpack app!

I've tried to follow your blog post with the current code to get it running on Heroku, but I can't get it to work. Are there differences between the steps you recommend there and the repo's current state? I see it was originally written last April.

Here's exactly what I've done:

• Added the deploy.js file to the root with the exact code from the blog post
• Added the postinstall script to package.json, which runs 'node deploy'
• Moved all the dev dependencies to prod dependencies
• Added a NODE_ENV=production config var on Heroku

When I deploy to Heroku, the app says it builds successfully. But when I run heroku open, I'm just hit with a Application Error. Here's what the logs say:

2015-10-18T06:15:44.281256+00:00 heroku[web.1]: Starting process with command npm start
2015-10-18T06:15:46.529826+00:00 app[web.1]:
2015-10-18T06:15:46.529838+00:00 app[web.1]: > [email protected] start /app
2015-10-18T06:15:46.529840+00:00 app[web.1]: > babel-node server
2015-10-18T06:15:46.529841+00:00 app[web.1]:
2015-10-18T06:16:44.564574+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2015-10-18T06:16:44.564574+00:00 heroku[web.1]: Stopping process with SIGKILL
2015-10-18T06:16:45.228070+00:00 heroku[web.1]: Process exited with status 137
2015-10-18T06:16:45.242940+00:00 heroku[web.1]: State changed from starting to crashed

Thanks!

Hi @christianalfoni , I've a pretty silly question...I'm still really noob with webpack...I'm trying to use facebook flow in my code (frontend and backend)..with my frontend works ok because the preset react includes support for facebook flow...

my problem is with the frontend, I've added "transform-flow-strip-types" to my module presets loaders but seems not works, I get an error in my express file with this code

var test : string = "it works"

because doesnt recognize the :

thanks christian, hope you can give me a better understand about it...
thank you

The server.js file is plain old JS and doesn't support ES6 code while this is needed for writing code in current JS standards. I need this very much because I want to server side rendering and to run react on server side we would need JSX and other compilers working for server.js as well.
Can we configure webpack to use es6 loaders for server side code as well?

Setting the process.env.NODE_ENV this way

I try to modify the index.tpl.html but not the heat load。

Hi,

First of all, thanks for the good work that you have done here. As an added feature, it would be great if you could add unit tests to the boilerplate.

Thanks,
Abhi.

nvm.

I noticed that babel-node recommends against its use in production. Do you think this is something we should worry about ?

https://babeljs.io/docs/usage/cli/#babel-node

https://github.com/christianalfoni/webpack-express-boilerplate/blob/master/package.json#L23

Using es6 for webpack.config.babel.js which looks like

'use strict';
import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import StatsPlugin from 'stats-webpack-plugin';
import merge from 'webpack-merge';

const ENV = process.env.NODE_ENV;
const TARGET = process.env.npm_lifecycle_event;

const development = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'app/main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loader: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: 'babel'
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.scss$/,
      loader: 'radium!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
};

if (ENV !== 'production') {
  module.exports = development;
} else {
  const production = {
    entry: [path.join(__dirname, 'app/main.js')],
    output: {
      path: path.join(__dirname, '/dist/'),
      filename: '[name]-[hash].min.js'
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new HtmlWebpackPlugin({
        template: 'app/index.tpl.html',
        inject: 'body',
        filename: 'index.html'
      }),
      new webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false,
          screw_ie8: true
        }
      }),
      new StatsPlugin('webpack.stats.json', {
        source: false,
        modules: false
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      })
    ]
  };
  module.exports = merge(development, production);
}

app/main.js looks like

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import Foo from './components/foo/foo.jsx';
ReactDOM.render(<Foo />, document.getElementById('root'));

On running npm start I get the error:

ERROR in ./app/main.js
Module parse failed: <project>/app/main.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import React from 'react';
| import ReactDOM from 'react-dom';
| import Foo from './components/foo/foo.jsx';
 @ multi main

Awesome boilerplate!

Testing React components can be tricky also. It would be cool to see you post mocha tests for a couple of the components.

Thanks.

I'm using this setup in my project, but I'm unable to get a successful build, it seems that HMR isn't working correctly. In the console HMR is timing out by the looks.

What does src refer to here? Maybe this is related.
https://github.com/christianalfoni/webpack-express-boilerplate/blob/master/server.js#L18

The only area that I really vary from you setup is having a .bablerc file instead of doing this all in webpack.config.js as I'm using Relay, and Relay needs it's plugin defined in here for some reason.

{
    "env": {
    "development": {
        "passPerPreset": true,
        "presets": [
        {
        "plugins": [
            "./build/babelRelayPlugin"
        ]
        }, "react", "es2015", "stage-0", "react-hmre"],
    },
    "production": {
        "passPerPreset": true,
        "presets": [
        {
        "plugins": [
            "./build/babelRelayPlugin"
        ]
        }, "react", "es2015", "stage-0"],
    }
    }
}

It's a feature request to add file-loader to import image files(png/jpeg/gif/svg) in javascript files. I can work on the this feature, if you would like me to.