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
Related
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.
I'm trying to embed an existing react app to my WordPress site using the plugin ReactPress. I created a react app inside the plugin section:
and added my build folder of the existing react app inside the path where is needed (using file administrator plugin):
The Path is wp-content/plugins/reactpress/apps/dase-mural-design. The problem is when I click on the URL Slug in order to see this section (where the build folder is placed) I don't see the react app I've just uploaded, I just see header and footer and these errors:
What I'm doing wrong? How can I fix it?
Thanks in advance.
Update:
I used FileZilla to upload these files but is still not showing anything. Any idea?
I changed the package.json homepage to: "homepage": "/wp-content/plugins/reactpress/apps/dase-mural-design/build",
But in the console of the WordPress site I see:
Thanks
It's an encoding issue, try setting your site encoding to utf-8 or uploading the files of your react app with a different tool, it could be the file manager plugin is changing the encoding when uploading.
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)
},[])
I have created an app, wherein i have given images paths as recommended by community. While running locally it loads and displays all the images but after i deployed on github pages, it is not taking the correct path to get the images. I dont know how to resolve the issue , can someone help me ?
i have tried adding %PUBLIC_URL% and all but nothing seems to work
This is what i have tried and works in local. My images are located under
public/images/login-background.png
background: url('/images/login-background.jpg') center center
no-repeat;
While i publish my project to github, url changes from 'localhost:3000' to 'https://singhkshitij.github.io/abc/' so all the images take url as
https://singhkshitij.github.io/images/login-background.png
while it should be
https://singhkshitij.github.io/abc/images/login-background.png
I'm going to assume you've used create-react-app to bootstrap your application. In which case you need to specify the homepage property in package.json to something like
"homepage": "https://singhkshitij.github.io/abc",
Reference - https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
I had the same issue. Basically you need to change
url('/images/login-background.jpg')
to
url('homepagePath/images/login-background/jpg')
where homepagePath is the url of your application served by github:
https://{username}.github.io/{reponame}
I'm creating a simply lightbox with create-react-app and I found one big issue that is bringing me some problems. I have in public folder some images. In root public folder I have spinner file Spinner-white.svg and I'm creating gallery on page localhost:3000/other When I am on this page all images that I want to add must be in folder /other but I'm using this Spinner somewhere else and I don't want to copy it on every folder that match my route path. localhost:3000/other2 for this path I need to create other folder /other2 and paste Spinner here.
I fixed this issue on production version but I cannot find answer in development.
Fixing for production:
{
id: 1,
url: process.env.PUBLIC_URL + '/other/3.jpg'
}
and in client package.json
"homepage": "path_to_domain",
Screen of my network tab:
Hope you are doing well.
For your issue, you have to introduce the base path in .env file.
With help of base path, your case to access the spinner wherever you want.
Hope it will help you.
create-react-app build with PUBLIC_URL