1

When we develop web app with VS code-server, the default method to preview the result URL is

http://{yoursite}/proxy/3000

However, it does not work with react development.

When we follow the official tutorial to start a react app, all the static resources inside the html template always redirected to the index.html

e.g index.html is returned instead of /static/js/bundle.js

RAY
  • 2,201
  • 2
  • 19
  • 18

2 Answers2

1

To resolve this problem, in the project root directory, open:

package.json

In script block,change the start property

from:

"start": "react-scripts start"

to

"start" : "PUBLIC_URL='/absproxy/3000' react-scripts start" :

  "scripts": {
    
    "start": "PUBLIC_URL='/absproxy/3000/' react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

This is also written in below documentation. https://coder.com/docs/code-server/latest/guide#stripping-proxyport-from-the-request-path

RAY
  • 2,201
  • 2
  • 19
  • 18
1

for those who has an another app running on port 3000, just simply do these little steps:

optional:

export PORT=3001

and then add in package.json

"scripts": {    
"start": "PUBLIC_URL='/absproxy/3001/' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

if you are running a Nextjs App you should do provide a basePath:

go to next.confing.js file and just add this line of code:

basePath:"/absproxy/3002"
mohammad
  • 91
  • 1
  • 6