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.
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.
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
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.
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>
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)
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
Related
Could use the wisdom of the crowd on this one. I just updated this React app, but like you can see on the page nothing appears. Here are the facts:
Link to the app | Code repo (though I don't think the code is the issue)
The dev build works fine on localhost (npm start)
The production build works fine on a local server (npm run build)
If you look in the developer tools at the above link, you can see all the files are loading 200 in the browser, no errors in the console or 404s.
The base href is set to ./, which is correct given the app is in a subdirectory (and again, there are no console errors)
There is no cache set in the headers, and the static files themselves use aggressive caching techniques. I have deleted the old files from the directory on the server and uploaded the production build, plus I checked the cache and .conf file on the nginx server for anything out of the ordinary.
This app was working last week at this URL (before I recently merged two pull requests), but the code changes were not to any of the component routing, and again, the app works fine on localhost and a local server.
So I feel like I'm missing something obvious and could use some other suggestions. I think the issue is on the backend, but I've hit a brick wall and could use a second set of eyes on it. Thanks for any help you can provide.
There is no route defined in your app that matches /dev/impact. If I manually push / to the history object your app renders the HowRichAmIStandalone component correctly on your production server.
I guess in development it works because your local development server serves the app e.g. at localhost:3000/ and not localhost:3000/dev/impact. You need to set the correct basename on the router in order for it to work:
<Router basename="/dev/impact">
{/* ... */}
</Router>
You can also define the basename in your env and only make it /dev/impact for the production environment if you don't want to have to type localhost:3000/dev/impact in development.
<Router basename={process.env.BASE_URL}">
{/* ... */}
</Router>
Not sure on which Stack subforum to ask so feel free to correct me.
Question: Can you host Laravel web app with React frontend on Heroku for free? I read something, somewhere, long ago that it can. If any one knows and if also knows any good tutorials/articles for said Laravel+React web app calamity, that would be great.
Ps: I got github repo for said app, so if that helps ...
Mucho kudos in advance.
Edit1:
I figured it out by reading docs and by watching this tutorial
Now i have different problem. Some font files for the app are accessed from public folder. Heroku than says cors not allowed.
I tried creating middleware(example), i also tried with some packages, not sure if it's Heroku or what, but my attempts of tackling this ended to no avail.
What would be my next vector of approach to this problem?
Edit2:
An url to my web app. My web app is using this space .
This is how it would look like when i seed Heroku:
an image from my local machine.
Edit3:
An image of data send by ajax call:
it sends data of user, but not of articles, like they're not seeded at all...
Edit4:
I am surprised? now. I sincerily don't know what i have done, but cors errors have disappeared ... Still seeding still doesn't work ..
Edit5:
Cors error persist still, but only when user get logged in. Don't why is this happening, it's peculiar ... Anyhow, besides these cors errors, images uploaded to storage folder, even after creating symlink on Heroku, don't persist. It must be like it is explained in this SO post. Still, all main functionalities work, that's something right?
Yes, you can!
You can do it by setting the Laravel preset to react (it comes with Vue by default) with:
$ php artisan preset react
This installs all the required dependencies and also creates a dummy Example in your resources directory.
Now you can build the js by compiling your assets with
npm run prod
This will generate your app.js file with all you need to include React components in your views. You can push it to heroku as usual.
I hope it helps :)
This project is being build by Jenkins and hosted with static files. When I test it locally with npm run start it all works fine. However on production when the static files are hosted, I'm getting a 404 on redirect and on unknown pages.
Trying to debug this locally I setup a similar situation.
Created the static files with npm run build
Host the files locally with python -m SimpleHTTPServer
When I go to the simpleserver and go to non existing route /thisdoesnotexist I'm also getting a 404.
I've tried using HashRouter which does not seem to fix anything. Besides I tried to use a redirect on the bottom of the switch to redirect the non existing routes the / if nothing is recognized. This does also not seem to work.
What is the best way to handle non existing routes and redirects in a static build?
To be precise it completely depends on how your system and infra are designed. But this is what I have seen mostly followed.
Non-existing routes: This type of pages are mostly handled inside your client-side router only which provision of first checking all the routes and if none matches then use one common component 404Component.
Static Routes: For this type of route first you want to call from the server not from the browser and second on web server you want special rules for this type of route which returns to static pages instead of client application. I have used nginx for this kind of setup where all the static pages go to some S3 pages and others to my client side router.
This type of setup should work
const reload = () => window.location.reload();
<Router>
// all your client routes..
...
// Your special static routes..
<Route path="/sitemap.xml" onEnter={reload} />
<Route path="/something.html" onEnter={reload} />
</Router>
Also, if you can put target="_blank" attribute in your <Link> that should also works
my react app is working locally but after the deploy, I faced the problem when I press any button there is no problem but if I want to refresh I see that problem "404 - File or directory not found."
I found this solution:
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Configure Your Server
"Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."
But I don't know how can I do this
I try something but it doesn't work
TRY
npm run build, this will create build folder inside your project root folder
if you want to deploy to remote server just transfer that build
folder.
npx serve -s build on windows, if you are using mac kindly see if it is still npx.
then try to refresh every path of it
hope this works, happy coding.
Since the server cannot find the static content in the directory (i.e. not found the file /tomcat/accounts/23), it will give you 404 unless you have additional route handling.
In React routing I think you can try with HashRouter
See more details here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
HashRouter vs BrowserRouter
I have a create-react-app project where I am creating a front side for users and an admin side, and want this two sides to use the same code base and run on one time instead of building two separate apps and each will use a different theme and files.
As suggested in some places I have ejected my create-react-app App and then tried adding a different entry point as suggested in this tutorial:
http://imshuai.com/create-react-app-multiple-entry-points/
but when i navigate to /admin nothing happens...any suggestions?
I am using react-router-dom as well.
When you navigate to /foo Webpack dev server has a little convenience feature to consider /foo/index.html as well if /foo does not exist. This is probably meant to be compatible with the user's expectations of other HTTP servers (i.e. Apache, Nginx). This means that /admin resolves to either something actually called /admin or /admin/index.html if the former is unavailable.
If you did follow the linked tutorial, the path you are looking for is clearly not supposed to be /admin but /admin.html. And your normal 'user' front end remains at /index.html, which is why you can still navigate to it the same way you were used to before ejecting.
Note: I don't speak Japanese, but I do read Webpack, so I just looked at the sample Webpack config and layout of the build/ folder as described in the tutorial.