1
votes

I have a webpack dev server that I want to server from a folder. Example url would be:

localhost/app

I have in my webpack config:

devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, "dist"),
    port: 3002,
    host: "0.0.0.0",
    publicPath: "/app",
    historyApiFallback: true,
    disableHostCheck: true
},
output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/app/",
    filename: "app.[hash].js"
}

This works fine. I can load up my app by going to localhost/app. But since I am using react I want to use a router, and when I go to a route under that subfolder I get an error:

Cannot GET /app/user

If I change everything back to server from / then the routing works. I would like to serve from a folder and have routing work still with webpack dev server, but I am not sure if that is possible.

Here is my app and routes.

import React from "react";
import { render } from "react-dom";
import { AppContainer } from "react-hot-loader";
import { BrowserRouter } from 'react-router-dom';

import App from "./components/App";

const renderApp = Component => {
    render(
        <AppContainer>
            <BrowserRouter basename="/app">
                <App />
            </BrowserRouter>
        </AppContainer>,
        document.getElementById("root")
    );
};

renderApp(App);

if (module.hot) {
    module.hot.accept(() => renderApp(App));
}

App.js

import React, { Component } from "react";
import { Route } from 'react-router-dom';
import Login from './Login';

export default class App extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={Login}/>
                <Route exact path="/user" component={Login}/>
            </div>
        );
    }
}

I am new to webpack and have searched around to get sub folders to work and they all say that is how it supposed to work.

Any ideas?

Thanks


I got it to work by changing:

historyApiFallback: {
  index: '/app',
}
1
Can you post your Routes?Chase DeAnda
I have added them.Andrew Bliss
It's an issue with your LazyRoute. You are supplying a relative import which is causing it to fail. Not sure how you would solve it though. Try prefixing your imports with /app?Chase DeAnda
I refactored it to just use the react router and removed LazyRoute and it still gives the same resultAndrew Bliss

1 Answers

1
votes

I got it to work by changing:

historyApiFallback: {
  index: '/app',
}