I am in the process of deploying a dynamic, React.js app to Heroku and wanted to test it out by using 'heroku local' to see if it works before pushing it to Heroku. Everything seemed to be working fine with the server - my database console.log message logs to the terminal signifying everything is going well - but when I try to access the website which is on localhost:5000, I get an error message of 'Cannot GET /' and the console prints a message saying , 'Failed to load resource: the server responded with a status of 404 (Not Found)'. My React.js files are all within the build folder which in conjunction with all of the other files, were pushed to git and commited, but for some reason my files are not showing up. I would greatly appreciate if someone could help me determine what went wrong. Sorry if my question is a little vague; please let me know if I can clarify something in better detail as I am fairly new to programming.
I've added a proxy to one of my package.json files to help with url routing; possibly this could be causing the issue?
Also, if it helps at all, a photo of my folders within Visual Studio code are listed below:
Related
I have a react application that I've deployed using nginx, which however only return a blank page. I've been looking for a solution for the last week and I can say that I tried almost anything... but nothing seems to work.
If I open the console I can see that all of the files are delivered with success, however, I got a "Loading failed for the with source ..." on firefox and a "net::ERR_HTTP2_PROTOCOL_ERROR 200" on Chrome. The weird thing is that both files are actually received (200 status) and can be viewed with the development tools. Moreover, if I visit the static resource link I get the full content without problems.
And of course, the issue is only when using the production environment, if I deploy it locally it works perfectly.
I really don't know what to do. I've tried updating the "homepage" directive, playing around with "react-router", changing the various nginx configurations and many other things but nothing.
If anyone could help me out I would really appreciate it!
I was running nginx with docker on Raspberry and, for some unknown reason, the timing on the container was completely messed up. I solved the problem by running the container in privileged mode ('privileged: true' on docker-compose)
Initially, I deployed my React app (created with create-react-app) to Github Pages and it works fine. However, after a few changes to the src files, I wanted to update the website so I decided to re-deploy the app using npm run deploy and it finishes with Published being printed at the end of the command. On Github, the actions shows that the build is successful, but it's not able to deploy, giving me an error code of 400.
Complete error log from Github is as follow:
Actor: github-pages[bot]
Action ID: 1996792679
Artifact URL: https://pipelines.actions.githubusercontent.com/P4vIRQYdOzrk38NoGmJNrF5GvwW7S92VAUyJNinMXyLtZzPbIB/_apis/pipelines/workflows/1996792679/artifacts?api-version=6.0-preview
{"count":1,"value":[{"containerId":354579,"size":3092480,"signedContent":null,"fileContainerResourceUrl":"https://pipelines.actions.githubusercontent.com/P4vIRQYdOzrk38NoGmJNrF5GvwW7S92VAUyJNinMXyLtZzPbIB/_apis/resources/Containers/354579","type":"actions_storage","name":"github-pages","url":"https://pipelines.actions.githubusercontent.com/P4vIRQYdOzrk38NoGmJNrF5GvwW7S92VAUyJNinMXyLtZzPbIB/_apis/pipelines/1/runs/2/artifacts?artifactName=github-pages","expiresOn":"2022-06-15T05:21:40.7473658Z","items":null}]}
Creating deployment with payload:
{
"artifact_url": "https://pipelines.actions.githubusercontent.com/P4vIRQYdOzrk38NoGmJNrF5GvwW7S92VAUyJNinMXyLtZzPbIB/_apis/pipelines/1/runs/2/artifacts?artifactName=github-pages&%24expand=SignedContent",
"pages_build_version": "8e6a4594c3e946a3f32ab67af68f527ec66ffc90",
"oidc_token": "***"
}
Failed to create deployment for 8e6a4594c3e946a3f32ab67af68f527ec66ffc90.
{"message":"Deployment request failed for 8e6a4594c3e946a3f32ab67af68f527ec66ffc90 due to in progress deployment. Please cancel c1852e5059b99567d48405d0610990fdc25f0946 first or wait for it to complete.","documentation_url":"https://docs.github.com/rest/reference/repos#create-a-github-pages-deployment"}
Error: Error: Request failed with status code 400
Error: Error: Request failed with status code 400
Sending telemetry for run id 1996792679
I'm very confused with what the error is, has anyone countered a 400 error code before while deploying to Gh Pages?
Additional Note: If you need any additional information, please do comment below as this is my first time deploying react app to github pages so I would love to help you in helping me
UPDATE
You can visit the github repo here: cynclar.github.io
I haven't found a solution, but I have a workaround. If you go to the last working workflow run in the Actions tab (look for a green checkmark), you can click Re-run all jobs, which should deploy your webpage for you, including the latest changes.
Hope this works for the time being until there is a better solution!
GitHub has fixed the issue:
If you navigate to the Actions tab, find the last deployment, and Re-run all jobs, it should work. I have tried this myself and it has been successful!
I'll leave the last answer up in case this doesn't work for anyone.
I had the same issue and this didn't work, re-running the old deploy used the same code and didn't have my changes. I deleted all the workflows from the github Actions tab and then pushing again triggered a new deployment that worked.
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 :)
I have successfully uploaded react app`s to github pages before, but this time when I try to upload a new page the code is pushed and everything looks fine in the repository, everything loads fine in the localhost. The problem is when I access the website in the console i get the error message above.
const res = await axios.get(' https://api.open5e.com/monsters/?limit=1086');
I am using this API, the limit is above 50 but I don`t believe this is the reason for the crash but I cannot think of anything else.
Website 1: (Currently redirects you to a 404 error page, as part of my attempt to solve the problem)
https://ottotsuma.github.io/MonsterSearch/
Repo - Website 1:
https://github.com/ottotsuma/MonsterSearch
Website 2:
https://ottotsuma.github.io/MonsterApiReact/
Repo all code:
https://github.com/ottotsuma/DnD-React
I also get this error in localhost and the hosted website: Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined. But since the website was working as intended so far I have just ignored it.
I was hoping if anyone else has had a similar problem with gh-pages they might know what I have done wrong.
Kind regards,
Sheep
Sample application works , unable to proceed with creating modifications to project
JDK included in build path (some posts say that lack of that might cause errors)
Error -> Error 403 in web page nothing else printed in console or web page
when I do localhost:8888/test.jsp I get a 404 error
console:
This works ->
<welcome-file>NewFile.html</welcome-file>
This FAILS ->
<welcome-file>guestbook.jsp</welcome-file>
my project directory from eclipse
where am i going wrong or missing something
it looked under WAR but it was not under WAR . some internal problem in my eclipse . now fixed
OLD
NEW