DEV Community

Discussion on: How to deploy React App to GitHub Pages

Collapse
 
jaykeeshow profile image
jaykeeshow

Very nice post Ibrahim. Really helped me.
I was able to deploy my page to gh pages. The only thing is that my background image is not loading.
I have the image in my src folder. While running the app on my local server, The site was displaying my image perfectly. While i deploy on gh pages, image disappears.
I have tried adding the image using jsx, but to no avail. Previously i imported the image to my scss. Thought that was the problem.
Can someone tell me what's going on?
app is deployed here- jaykeeshow.github.io/simple-app/

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks buddy, I see your image doesn't load i saw the build file in yout code, try to build and run build locally before you deployed it and check why the image didn't appear

Collapse
 
jaykeeshow profile image
jaykeeshow

dear ibrahim, i dont know how to run build locally. when i run- npm install -g serve,
I get an error.

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jrajkumar/.npm/_logs/2021-02-23T10_56_22_458Z-debug.log
jays-Air:simple-app jrajkumar$

Thread Thread
 
damsalem profile image
Dani Amsalem

I ran into a similar issue where my images weren't loading. After running npm run build and npx run serve and some other commands, I found that my images were looking for the path I set in step #3, setting a homepage value.

By adding the slug of my repo /my-repo to the beginning of my image relative path, I was able to see my images on my local build. Then running npm run deploy, I pushed it all back up to Github and my images showed up as intended.