serving dist directory through nginx fails #214
Comments
|
Sorry, I'm not strong in NGINX. I'd suggest posting on StackOverflow since your question is simple and not specific to Slingshot. Your real question is how to serve static files via NGINX. |
|
@coryhouse - I think this could be a webpack issue and it's related to this repo because of how it's configured. I get the same result when I go into the the dist folder and click index.html. That's the same way nginx would serve the file - is this ultimately a pure webpack issue, or is it related to this repo? |
|
The filepaths written to index.html have a leading slash. This means you need to serve the site from the root. When you open index.html via the browser, it will open it at the full file path using the file protocol instead of http. For example. file:///Users/coryhouse/Desktop/projects/react-slingshot/dist/index.html When serving from this nested path, script references like /main.js will fail. That said, if you need to serve the app from a nested path, you can look into changing the public path in webpack.config.prod.js: https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.prod.js#L23 |
|
I have manually just changed the index.html to point to the right .js and .css - it loads the scripts fine, but still empty. |
|
Open your browser tools - I bet you're getting a 404. |
|
No - i swear to you : ) Both the .js and .css load - I know because I saw it load in the dev tools. |
|
If it doesn't load, you should see a JS error or network error in your browser console |
|
So it loads the index.html, js and css (200) responses in the console. The DOM is empty. If i keep refreshing the page, intermittently it will throw an error saying it failed to parse the .css.map |
|
But why does it work when served through express is what i don't understand |
|
Do you have a demo of this or is a public url? That way we can take a look at it. Nearly impossible to troubleshoot an issue like this without being able to re-produce. |
|
This is a problem with the example app that ships as well - if you build the directory with the publicPath as './' it will load the index.html, css , and js, but not the rest of the files. Parts of the dom are missing too. |
|
Can we get this reopened after you can confirm?? |
|
I've confirmed it works just fine when served from web root. (which is as designed) Steps to reproduce:
Step 4 will open a lightweight http server that serves files from dist. The app works fine for me. So this proves it works fine with a plain webserver that simply serves static files. |
|
@coryhouse I believe the issue here is browserHistory. @jeongl could you try switching to hashHistory on your index.js? I think it will solve the problem you are having. You can also configure NGINX to use browserHistory https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory I see browserHistory is also mentioned on #218 |
|
I'm open to it, but am unclear exactly what changes are required, so a PR would help me understand if it makes sense. Thanks for the offer! |
|
I have the same issue when running on Apache. It just shows a blank page and no errors |
|
The issue is with the default route. You need to add a default route to links in the router and then it works. So, this issue is not related to react sligshot |
I've been trying to deploy my app the past couple of days using nginx. It definitely works when using express and pointing the dist folder, using:
app.use(express.static('dist'));The problem is when serving it through nginx using a location block. I have the following location block
It hits the route, loads the index.html, .js & .css, but it renders an empty app. Any thoughts??
The text was updated successfully, but these errors were encountered: