2

When I refresh page on index route (/) and login page (/login), it works fine.

However, my website gets error as I refresh on other routes, for example /user/123456.

Because no matter what the request is, the browser always gets HTML file.
Thus, both of the content in main.css and main.js are HTML, and the browser error.

enter image description here

I have already read the README of create-react-app.
Whether I use serve package ($serve -s build -p 80) or express, it will produce the strange bug.

Following is my server code:

//server.js
const express = require('express');
const path = require('path');
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 80;
app.listen(PORT, () => {
  console.log(`Production Express server running at localhost:${PORT}`);
});

Edit: I have figured out where caused the problem.
I created a new project, and compared it to mine. The path of static files in the new project is absolute, but in my project is relative.
As a result, I delete "homepage": "." in the package.json. 

//package.json
{ ....
  dependencies:{....},
  ....,
- "homepage": "."
}

Everything works as expected now. How am I careless...

SHZhao74
  • 73
  • 9
  • It would be helpful to see your webpack config and index.html – Chaim Friedman May 14 '17 at 13:59
  • @promisified thanks for response. i use create-react-app to develop and build. should I reject? – SHZhao74 May 14 '17 at 16:11
  • Are you trying to serve the static files created by the build script? If not, I'm not sure why you would need express to serve files given that create react app uses webpack dev server in development? – Chaim Friedman May 14 '17 at 16:13
  • yes I use webpack-dev-server when developing. I used `$serve -s build -p 80` to "deploy" my app and encountered the above problem. so I try to use express to slove – SHZhao74 May 14 '17 at 16:27

3 Answers3

1

I have figured out where caused the problem. I created a new project, and compared it to mine. The path of static files in the new project is absolute, but in my project is relative. As a result, I delete "homepage": "." in the package.json.

//package.json
{ ....
 dependencies:{....},
 ....,
- "homepage": "."
}

Everything works as expected now. How am I careless...

SHZhao74
  • 73
  • 9
0

If your route /user/** is defined after app.get('/*', ... it might not match because /* gets all the requests and returns you index.html. Try without the * or declare the other routes before.

max-lt
  • 1,037
  • 10
  • 12
  • thanks for response. `react-route` is client side routing. Do you mean is that I still need to handle server routing manually? – SHZhao74 May 14 '17 at 16:12
  • No, I think that if you get your main.html file on any request it might be because that `app.get('/*'` catches all your requests. So maybe that `app.use(express.static(path.join(__dirname, 'build')));` isn't well set, I don't see any "build" folder in your file tree, maybe that's the reason. – max-lt May 14 '17 at 16:25
0

First, I thought you misunderstood the server part. In your case, you use serve as your server. This is a static server provided by [serve]. If you want to use your own server.js, you should run node server.js or node server.

I also did the same things with you and have no this issue. The followings are what I did:

  1. create-react-app my-app
  2. npm run build
  3. sudo serve -s build -p 80 (sudo for port under 1024)

And I got the results:

/user/321

I guessed you might forget to build the script. You can try the followings:

  1. remove build/ folder
  2. run npm run build again

Advise: If you want to focus on front-end, you can just use [serve]. It will be easy for you to focus on what you need.

kkshyu
  • 1