react: app starting with localhost/appname-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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>