mhaagens / hot-reload-all-the-things Goto Github PK

View Code? Open in Web Editor NEW

128.0 128.0 20.0 36 KB

Starter project for HMR with backend routes and server/client-side react.

JavaScript 100.00%

es6 express hot-module-replacement hot-reload javascript react webpack

hot-reload-all-the-things's People

Contributors

Stargazers

Watchers

Forkers

khadorkin mtarapata budarin asokani dinesh-pipecandy testseven vinks ixigen matthova binoysinha ivawzh mfrohberg skippy123 agdolla kipriz gerardketuma heardy hitesh97 artemis15

hot-reload-all-the-things's Issues

How do I load an svg file into this webpack setup?

Hey @mhaagens ,

Sorry to bother you again but have been struggling for the last hour with loading an SVG into my TopNav component like this:

import React from "react";
const logo = require('../client/assets/logo.svg');

const TopNav = () => 
  <div className="top-nav">
    <img src={logo} />
  </div>

export default TopNav

But this totally borks up and throws this error:

ERROR in ./client/assets/logo.svg
Module parse failed: /Users/amiterandole/Dropbox/projects/techchatfest/client/assets/logo.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|     <g fill="#61DAFB">
|         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
 @ ./common/TopNav.js 2:11-47
 @ ./common/App.js
 @ ./server/server.js
 @ ./server/index.js
 @ multi webpack/hot/poll?1000 ./server/index

Here is my full (modified) webpack.client.config.js file for reference:

const webpack = require("webpack");
const path = require("path");
const precss = require("precss");
const autoprefixer = require("autoprefixer");
const ant = require('postcss-ant')

module.exports = {
  devtool: "inline-source-map",
  entry: [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://localhost:3001",
    "webpack/hot/only-dev-server",
    "./client/index",
  ],
  target: "web",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: "babel-loader",
        include: [
          path.join(__dirname, "client"),
          path.join(__dirname, "common"),
        ],
      },
      {
        test: /\.scss|css$/,
        use: [ 'style-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap' ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          "file-loader?hash=sha512&digest=hex&name=assets/[hash].[ext]",
          "image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false"
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [ "url-loader?limit=10000&mimetype=application/font-woff" ]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [ "file-loader" ]
      }
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "process.env": { BUILD_TARGET: JSON.stringify("client") },
    }),
    new webpack.LoaderOptionsPlugin({
      test: /\.scss|css$/,
      debug: true,
      options: {
          postcss: function() {
              return [ ant, precss, autoprefixer ];
          },
          context: path.join(__dirname, "client"),
          output: { path: path.join(__dirname, ".build") }
      }
    })
  ],
  devServer: {
    host: "localhost",
    port: 3001,
    historyApiFallback: true,
    hot: true,
  },
  output: {
    path: path.join(__dirname, ".build"),
    publicPath: "http://localhost:3001/",
    filename: "client.js",
  },
};

I have also opened up a stackoverflow issue on this: http://stackoverflow.com/questions/42592371/how-do-i-load-and-link-an-svg-file-with-webpack-2-2-1

How would I replace the inline html in server.js?

What would I have to do to replace this inline code:

 let html = `<!doctype html>
    <html class="no-js" lang="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <title>HMR all the things!</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
            <div id="root">${application}</div>
            <script src="http://localhost:3001/client.js"></script>
        </body>
    </html>`;

Resolve debug workflow with VSCode

Would be great to figure out how to debug front-end and back-end code via VSCode.

Need help to make koa server hot-reloading

Create simple koa server with hot-reloading like in your article
simple-koa-hot-reloading-server

Page does not update after refresh while recompiling.
Thanks

Question: TypeScript support

I read your hackernoon article and it inspired me.

I'm trying to adapt my repo to add hot reloading and I'm running into a problem where the server returns an index of files like dist/browser.js and dist/server.js but doesn't actually run the server.

styfle/react-server-example-tsx#8

So I looked at your repo here and I'm wondering what it would take to add TypeScript support.

Thanks!

Loading css using style-loader and css-loader does not work

I added a file.css in the commons folder

and try to import it like so in App.js

import css from './file.css';

I add style-loader and css-loader to your setup (inside the rules block)

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
}

When I run npm start I get Module parse failed:

What am I doing wrong?

Here is my full webpack.config.client.js file for reference:

const webpack = require("webpack");
const path = require("path");

module.exports = {
  devtool: "inline-source-map",
  entry: [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://localhost:3001",
    "webpack/hot/only-dev-server",
    "./client/index",
  ],
  target: "web",
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: "babel-loader",
        include: [
          path.join(__dirname, "client"),
          path.join(__dirname, "common"),
        ],
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "process.env": { BUILD_TARGET: JSON.stringify("client") },
    }),
  ],
  devServer: {
    host: "localhost",
    port: 3001,
    historyApiFallback: true,
    hot: true,
  },
  output: {
    path: path.join(__dirname, ".build"),
    publicPath: "http://localhost:3001/",
    filename: "client.js",
  },
};

require('./file.css'); also doesn't work

CORS error

Cloned the repo and went to localhost:3000. Upon updating App.js, the DOM was not updated and The following error resulted in the browser console:

XMLHttpRequest cannot load http://localhost:3001/cf7c56d45d67e84f3b78.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I'm going to play around a bit with the CORS config to see if I can patch this. Any chance there's something wrong with my local setup?

Webpack v3

Hot module reloading is broken when using webpack v3. Any idea what changes are needed?

Does not work when .css / .scss is involved

I noticed in your example, you conspicuously left out a .css/.scss.

I tried working with one in common/app and it fails.

Is this to be expected?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.