I have an app that is running on (http://simple-pen.surge.sh). This is built with React/Redux for Front-end and Rails for back-end. When I get on the site, I can either sign-up or sign-in and issue a JWT token for the user. Once logged in, I have a set of notebooks I can view. However, it's only when clicking on a notebook, I get redirected to a 404 Page Not Found error.
I'm not sure why I get an error when making the GET request to certain pages.
Trying to access "http://simple-pen.surge.sh/notebooks/1/notes" url, but fails. In one scenario, I have it set so if the user is logged in, the "simple-pen.surge.sh" root path redirects the user to their notebooks route i.e. "http://simple-pen.surge.sh/notebooks" which renders the page, but when I make an actual request for this URL directly, I then get the error.
Below are links to GitHub repos for React and Rails app respectively.
https://github.com/jamesvphan/simplepen-react
https://github.com/jamesvphan/simplepen
Any help or knowledge as to why this is occurring would be great!
Follow below step to resolve(only 4 surge):
npm run build
cd build
cp index.html 200.html
surge
From here you can continue as usual
You can't access your routes directly. you have to do this little hack for that.
After you run the npm run build command you have to go to the build folder of your react application folder.
Take a copy of index.html file. then past it in the same place and rename it as 200.html
now it will work as we wish. This is all for today.
read more about this issue: here
Change your build step in package.json
"build": "react-scripts build && cp build/index.html build/200.html"
Source: https://medium.com/superhighfives/serving-client-side-routing-with-surge-sh-7b705542cf3
Related
Being kinda new to React and everything clientside related, I am trying to build a Electron application with React.
At this point I can't tell if that's a good idea, but I wanted to try it.
Currently it works fine (see Github).
However I now wanted to add #react-oauth/google to give users the option to sign into their Google Account to allow the application to access their google drive and I'm struggling with that.
See the testing_auth_2 branch for that.
I enabled the drive-api in GCP and created credentials for a web application, adding http://localhost and http://localhost:3000 as authorised Javascript origins.
Now it works, but only when I start it as a webpage (npm start in my Github)
Starting it as an electron app failes, probably because electron doesnt run under localhost somehow (npm run electron:dev in my github code).
I tried creating Desktop and ios credentials since those dont ned authorised origins but the error persists.
Steps to recreate:
Enable drive api and create credentials in GCP
clone git#github.com:Urr4/electron-archive.git
checkout testing_auth_2 branch
Replace XXX in index.tsx with the client_id
The Google login should work using npm start, but not using npm run electron:dev
Any help is appreciated
enter image description here
I want to host my app on firebase.
I followed these steps.
npm run build and it created build folder
firebase init, select hosting,
What do you want to use as your public directory? build
Configure as a single-page app (rewrite all URLs to /index.html)?
Yes
File build/index.html already exists. Overwrite? No
and then finally firebase deploy
after some time I see files uploaded successfully and in the firebase hosting dashboard it shows files uploaded something like 727. but the app looks something like a welcome message "Welcome Firebase Hosting Setup Complete. You're seeing this because you've successfully set up Firebase Hosting. Now it's time to go build something extraordinary!"
however, if I create a react app using create-react-app, and follow the same steps, it's working fine at the same URL and host. it displays the app at once without a problem.
my firebase.json
Firsty once you deploy it try viewing it on incognito mode as sometimes due to the cache it renders the same page
now still if you have errors follow this steps given in the link I followed this and got mine online
https://www.youtube.com/watch?v=IDHfvpsYShs&t=337s
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
As of now I want to publish my payment gateway website to GitHub pages but after running all the commands like npm run build as well npm run deploy my page has been published but on GitHub pages it is showing error for resource:
Here is how it looks in my IDE:
You published your website on a subpath like xyz.github.io/mysubpath but the references on the index page (according to the page source) are absolute to the root.
This is even shown in the console output:
The project was built assuming it is hosted at /.
If you cannot move your website to the root, you need to adjust the paths to be either relative (remove the first slash) or include the subpath (e.g. /mysubpath/favicon.ico). The framework you are using probably has a way to set the basepath or homepage.
From the screenshot of your IDE, I see that you seem to use React and therefore can probably change line 2 to homepage instead of home. Additional information can be found here.
I have created a site using CRA, If I run build it all works fine on Github-pages, but when I attempt to run the site through my Netlify account it shows up a blank page. It's connecting to the site as the html is showing with my React page. but there is no content. The Repo in Github has a client folder in which is my build folder. I have tried everything to get this working, am I missing something simple?
This is my Package.json file:
My Netlify settings point to the correct directory:
There is also a 404 error showing when the page loads:
I changed the homepage of my package.json file to "." and then on netlify changed the settings to not see npm warnings as errors which I think was blocking the site compiling. This was done by adding CI=false on the build command on netlify.
Everything is now working