35

Full Github project: https://github.com/pbrianmackey/uiexperiment

I run

webpack-dev-server --content-base deployment/

Then go to http://localhost:8080/, Error

Cannot GET /

I think the problem is a misconfiguration of webpack. I checked by webpack.config.js file and don't see a problem. How can I fix this so I get my hello world example?

It could be a routing problem too. I think I can use this website without react-router, but I could be wrong. There are no errors in webpacks output on the console.

index.js

import "babel-polyfill";//for flipping IE
import $ from 'jquery';
import jQuery from 'jquery';
var App = require('./app');
var React = require('react');
var ReactDOM = require('react-dom')

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);
Community
  • 1
  • 1
P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348

5 Answers5

40

Turns out I had index.html in the wrong place. From the webpack docs:

To load your bundled files, you will need to create an index.html file in the build folder from which static files are served (--content-base option).

I made a copy of index.html in a new folder I called deployment to match what I specified in the output.path

P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348
17

In the webpack.config.js put this :

devServer: {
  historyApiFallback: true,
}
Muhammad Zeeshan
  • 4,608
  • 4
  • 15
  • 41
Manuel Carmona
  • 357
  • 2
  • 6
7

In webpack-dev-server documentation, there is an writeToDisk option to solve this problem docs. It will store all files on disk instead of memory. Example from my config: 

devServer: {
    port: 3000,
    writeToDisk: true,
    proxy: {
        '/': 'http://localhost:8080'
    }
}
Dmitry Sergeev
  • 441
  • 6
  • 6
  • `writeToDisk` is not exist `- options has an unknown property 'writeToDisk'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }` – elliotching Oct 04 '21 at 12:47
  • 1
    @elliotching It's under the devMiddleware for Webpack 4 https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware – Mike Nov 03 '21 at 07:54
2

I had this same issue and what fixed it for me was adding the following code to my webpack.config.js file.

static: {
  directory: path.join(__dirname, '/')
}

Add this as an additional option to devServer:

'/' indicates the root folder for your app.

Dwain B
  • 187
  • 1
  • 6
1
  • You have to be running node.js version 10.13.0+.
  • Add an absolute path with the exit point 'dist'.
  • Webpack HTML plugin is required (to access the plugin).
  • Clear your dev server cache ctrl + c & in task manager.

My webpack.config.js file looks like this.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './starting-code/code/main.js',
    output: 
           {
              path: path.resolve(__dirname, 'dist'),
              filename:'main.js',
           },
    plugins: [new HtmlWebpackPlugin({ template: './starting- 
              code/index.html' })],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.png$/i,
                type: "asset/resource"
            },
            {
                test: /\.txt$/i,
                type: 'asset/source'
            },
            {
                test: /\.(woff|woff2)$/i,
                type: "asset/resource"
            },

        ]
    }
}
Ziggy
  • 43
  • 1
  • 6