So basically I made an e-portfolio using create-react-app and when i used the github pages link (eyoo217.github.io/e-portfolio), the website loaded perfectly fine. However I got a new domain (elotmusk.com) and now the assets cant be loaded to the domain?
Github link to repo: https://github.com/eyoo217/e-portfolio
Package.json link: https://github.com/eyoo217/e-portfolio/blob/main/package.json
I changed the homepage link in the json file to match the new url but still not working.
Related
I have hosted a simple static react app on github pages, Made all changes in package.json
But first the link was showing 404, I searched on the internet and tried adding a ? at the end of the link which resulted in the link showing a blank page.
Its showing a blank page now! I have tried all the solutions such as;
i. switching master and gh-pages branches
ii. adding ? at the end of the link
iii. changing "private" : true, in package.json to false
iv. adding /index.html at the end of the link
v. adding new commits and redeploying the app
These solutions didn't work, any help would be appreciated!!
link: https://iqramalik21.github.io/monsters-rolodex/
git repo: https://github.com/iqramalik21/monsters-rolodex
Couple of steps you need to follow exactly:
Create a new Repo and Enter username.github.io as the repository name. Replace username with your GitHub username. For example, if your username is octocat, the repository name should be octocat.github.io.
In your project(the one with your codebase) terminal run npm run build this will create a build folder in your project directory.
Push only the contents of the build folder onto the new repo you created with username.github.io name.
That's it you will start to see on your GitHub page!!
Note: Your page is hosted on the root route.
I am trying to make a simple React app with ViteJS and GitHub Pages but something is wrong with my images. I can't load them, event although I added them to assets folder. Can you help me how to fix that ?
when vite priview
vite.config.js file
that is my project, please help me
https://github.com/quocbinh-npm9081/React-App-Space-tourism-website
You are not referencing the correct url for your images you are using the path https://quocbinh-npm9081.github.io/assets/destination/image-titan.png where as it should be https://quocbinh-npm9081.github.io/React-App-Space-tourism-website/assets/destination/image-titan.png
Github pages deploys your site in your project sub-directory
You should build your site accordingly to be hosted in a sub-directory
Additionnaly, the vite doc say :
If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to '/'.
export default defineConfig(
// base: ''
}
If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
export default defineConfig(
base: '/React-App-Space-tourism-website/'
}
then in your case:
git push -f git#github.com:<USERNAME>/<REPO>.git master:gh-pages
I hosted one of my website on Netlify. Site was built with ReactJS.
After deploying on Netlify, I can view the homepage but can't load any of the other pages.
Site works totally fine in localhost.
Is this a problem with routing?
I used react-router for routing.
Try to create a new file in your project public folder called _redirects then add this inside it
/* /index.html 200
its been solved here before Netlify does not recognize the URL params when using react-router-dom
Just found this blog post. This gives a good explanation.
Creating a file called _redirects in the public folder and adding this code
/* /index.html 200
solves the problem.
https://dev.to/rajeshroyal/page-not-found-error-on-netlify-reactjs-react-router-solved-43oa
I recently deployed a reactjs website on github pages using the custom domain -https://titanmarket.co.ke/.
The website works as expected but returns a 404 error when you reload a page. Usually, a user would expect the current page to be displayed on refresh.
Any insight on this would be great.
This may answer your question link Reference, Also see this
Super easy solution for Github pages reload 404 error.
in the src/public/ index.js file add this script below to the bottom body:
Index.js
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html
Create a 404.html file in the root directory:
404.html
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html
Read more:
Source:
https://github.com/rafgraph/spa-github-pages
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])