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',
}
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