404 page not found on nextJs app refreshing on netlify - reactjs

This is the link to my GitHub project, see the directory structure: https://github.com/SutirthaDey/crowdcoin
app link: https://crowdcoins.netlify.app/
I have used react,nextJs, and next routes for dynamic routing. The problem I'm facing is after deploying it using netlify, everything is working fine but when I do a refresh, it's showing 404 pages not found(except the main index.js page/landing page). I don't know whether I was doing it appropriately but tried several things like using netlify.toml and _redirects but nothing really worked. Other than the refreshing part, everything is working fine.

I was stressing out for days over this its such unique problem that I couldn't find the answer too anywhere. I also followed the same Solidity tutorial as you and unfortunately the tutorial is very out of date so a lot of things don't really work. I had the exact same issue as you when trying to build on netlify. It took a while to figure out but basically the next-routes package does not work with netlify. So you will have to set up your routes just using vanilla Next.js. So delete the server.js and routes.js files then search up how to create routes using Next.js I would suggest these tutorials they are very good! Next routes tutorials. Hopefully this helps others I don't want anyone else to go through what I had to go through lol

Related

GitHub Pages showing an empty page react

I've been trying to build my first github page for several weeks already. It shows an empty page and I don't know if I'm doing something wrong?
Here is my repository https://github.com/NatellaGomza/reactdnd/tree/gh-pages and page https://natellagomza.github.io/reactdnd/
Thank you in advance!
Look inside your index.html. There are scripts looking like this <script defer="defer" src="/reactdnd/static/js/main.42b16ba6.js"></script>.
As you can src starts with / which is not what you want with github pages, because your page is deployed to https://natellagomza.github.io/reactdnd/ and not https://natellagomza.github.io/.
The solution depends on the bundler you are using.
I guess that you are using create-react-app so the simple change in package.json will do. Try adding "homepage": "./" and then build.
I personally use this gist that automatically builds and deploys my apps after each push to the main branch

netlify redirects not working in react app

I'm at a beggining of my programmer journey, this is my firt post, probably not last.
So here is problem. I build portfolio project in React, using create-react-app. It was not necessary technology but I wanted to practice, by moving simple site to React. I used routes for multipage (there is only 2 pages). I used custom domain, because this will be site for my mother hairdresser salon, and Netlify free hosting. Here is link:
https://bozena.net.pl/
I struggle with redirection for gallery (galeria).
https://bozena.net.pl/pages/Gallery
If I go directly there or refresh, its not working. I used API for pictures, if thats matter. I found out I need to use _redirects file in build folder, but I cant figure out exact syntax for this (I checked Netlify documentation about _redirects). For now my _redirects file looks like this:
/ https://bozena.net.pl/#price-div
/ https://bozena.net.pl/#contact
/(whats here?) https://bozena.net.pl/Gallery
I tried different paths for this gallery, like /pages/Gallery (here is jsx file for gallery) but I didnt find anything working. price div and contact are divs on main page,and this directions will get me to main page. Anyone help me get this gallery link working?
Here is code for whole page:
https://github.com/kadynski/Hairdresser-app
code
bold
italic
quote
Draft saved
I'm at a beggining of my programmer journey, this is my firt post, probably not last.
So here is problem. I build portfolio project in React, using create-react-app. It was not necessary technology but I wanted to practice, by moving simple site to React. I used routes for multipage (there is only 2 pages). I used custom domain, because this will be site for my mother hairdresser salon, and Netlify free hosting. Here is link:
https://bozena.net.pl/
I struggle with redirection for gallery (galeria).
https://bozena.net.pl/pages/Gallery
If I go directly there or refresh, its not working. I used API for pictures, if thats matter. I found out I need to use _redirects file in build folder, but I cant figure out exact syntax for this (I checked Netlify documentation about _redirects). For now my _redirects file looks like this:
/ https://bozena.net.pl/#price-div
/ https://bozena.net.pl/#contact
/(whats here?) https://bozena.net.pl/Gallery
I tried different paths for this gallery, like /pages/Gallery (here is jsx file for gallery) but I didnt find anything working. price div and contact are divs on main page,and this directions will get me to main page. Anyone help me get this gallery link working?
Here is code for whole page:
https://github.com/kadynski/Hairdresser-app
Try this
add a file in your project public folder name it as _redirects
and then paste this code and save (and deploy) /* /index.html 200
Source: https://answers.netlify.com/t/netlify-page-not-found-when-sharing-react-router-dom-based-links/11744/2

Publishing my React website to GitHub pages just produces a blank page

I'm probably missing something really obvious but I'm not very accustomed to GitHub or React so I'd love some advice.
My GitHub is here:
https://github.com/SarahACollins/PortfolioWebsite
I've tried publishing the website here:
https://sarahacollins.github.io/PortfolioWebsite/
and it just produces a blank page. I've tried several different ways of fixing (changing the homepage, moving the index.html to the front, etc.) but can't figure out what's wrong. Any help would be appreciated.
In the developer console it says:
Uncaught SyntaxError: Cannot use import statement outside a module. Looking at the location of the error shows that it is node.js code.:
import React from 'react';
You need to compile your react source code and create a .js file for the client from it.

ReactJS SSR app whole content disappears when "homepage": used in package.json

I have a reactJS SSR app deployed into server, I am trying to use one of the page /listpage as a widget into some other website
The list page is appearing nicely in other website however some of the click actions were not working, when I debugged it I found that the issue was with serving reactjs static js chunk files which were created by react run build. The issue was with relative path /static/js/xxxx
to fix this issue, one solution is to have a full path reference, to enable that I added homepage:"" in package.json
this worked and when I checked network tab in chrome browser i could see all static js files are referred using full path.
however a strange issue occurred , the whole list widget appears and suddenly disappears , when I inspect the elements I could see nothing inside thats where all react components suppose to be rendered.
for full code of SSR project kindly refer with explanation.
however the full code is in github

Subfolder of github pages shows me an old react code instead of a new website

I have an html page in a subfolder of my github page but I don't see it. instead I see an old react app I once had there.
Site: oren.github.io/food
Code: https://github.com/oren/oren.github.io/tree/master/food
Any idea what's going there? Maybe some settings on my github pages that I need to tweak? I don't think it's caching issue since it has been 7 hours since I copy the code of my new site into the food folder.
i deleted both my food repo and my github pages repo and the problem is solved (:
I believe that react did some interesting things with gh-pages. anyway. life is great.

Resources