react: app starting with localhost/appname

Question

after deploy gh-pages
After I deploy the my app to gh-pages, it does not start with http://localhost:3000. It starts with http://localhost:3000/appname and can not viewed in my app; local and gh pages, I can cannot see data on app on my homepage.

Answer 1

I received an “Ask to Answer” on this 5 years after the original answers were provided, suggesting someone is experiencing a new problem with this. The following scenarios are what I could think of off the top of my head.

A service must be running on the port.

If you’re going to http://localhost:3000 in your browser and not seeing anything, then you’re not running a server capable of responding to HTTP requests.

The service may not be a web server.

Web servers are an HTTP server, but there are many other kinds. For example, if you have a telnet server running on port 3000, it won’t respond to HTTP requests in the browser. If you’re running something other than an HTTP server, then make sure you’re using the appropriate client.

I KNOW something is running and I still can’t access it!

If you’re a developer saying “BUT I AM running a server, I KNOW I AM”… double check. Servers frequently crash in development due to unforeseen bugs.

If you’re unsure whether a server is running, inspect the port manually (using commands on the terminal). The approach for doing this differs on each operating system and it doesn’t necessarily feel straightforward if you’re brand new to it… and if you’re not brand new to it, I’ll bet you’ll have to look up the commands. I wrote a global Node.js-based CLI utility to help with this scenario: coreybutler/porthog. The tool will tell you which process is “hogging” a port, providing insight into whether anything is actually running on the local port or not. A port scanner could also help.

If Porthog looks empty, like the screen below, then nothing is running on the port.

If the tool responds, then something is running on the port and you should be getting a response. For example, I launched a Fenix Web Server on port 3000 before running the tool a second time.

If none of this works for you, then you should probably find someone to help walk you through it in person.

Answer 2

Check your package.json there is a property called homepage, according to your screenshots that value is now "redux-store" change it to "/" it will change the homepage and you can access your site at http://localhost:3000

Answer 3

Try using create-react-app to create your app

npx create-react-app my-app  // (if using npx and don't want to install package) else just remove npx but first install create-react-app using command npm install mentioned in the end
cd my-app
npm start

Install create react app first using

npm install -g create-react-app

Then open http://localhost:3000/ to see your app.

Answer 4

That is expected when you deploy your apps with gh-pages, which is to separate different (possible) apps from different repositories of yours. This helps us to host different applications from a single domain. (Correct me if I am wrong here)

So, in case of React app, by any chance, if you have used routing in your application, you may want to try redirecting the page /appname to /. e.g.

...
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
...
<Router>
  <Switch>
    <Route exact path="/appname">
      <Redirect to="/" />
    </Route>
    <Route exact path="/" component={HomeComponent} />
    ...
  </Switch>
</Router>

Answer 5

I find a solution at https://github.com/facebook/create-react-app/issues/1765. "The homepage setting only affects paths to JS and CSS in the produced HTML. It can’t affect your routing configuration.

path='/' in your router configuration means you’re literally matching /. Only https://rockchalkwushock.github.io/ would match /.

But your project is on /rcws-development/. However if you change the routing configuration to say /rcws-development/ then this won’t work in development on npm start because the development server serves from /.

Two solutions:

Don’t use HTML5 history on GitHub pages. Use hashHistory instead. Your URLs will look like https://rockchalkwushock.github.io/rcws-development/#path/inside/the/app.

Use process.env.PUBLIC_URL in your route definitions so that they work both in development and after deployment. For example: <Route path={process.env.PUBLIC_URL + '/'}>. This will be empty in development and rcws-development (inferred from homepage) in production.

In the future, we might flip the development server to also take homepage into account (#1582). If this happens, your project would get served at localhost:3000/rcws-development even locally so you'd bump into this issue earlier (and would have to use process.env.PUBLIC_URL in route definitions anyway). But we have not really decided on this yet." from gaeron(https://github.com/gaearon)

Answer 6

Actually, if you want to do undo the changes you have made then, the most of the time we forget to remove this line of code from our package.json

 "homepage": "https://your-github-username.github.io/your-repo-name"

so even if we are running our project locally then also we get localhost:3000/appName instead of localhost:3000