I have created react application without using boilerplate create-react-app. I want to deploy it with git hub. Can I deploy it ? if yes, can anyone suggest steps ?
Assuming you have gh-pages package installed and you know how to deploy a index.html for example, add this in your package.json scripts:
scripts: {
...,
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Then run npm run deploy.
Take a look at this in depth article about it, if you get stuck, or leave some comments to this answer
https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
Related
I pushed my code to git-hub main branch and its all fine,
but the git-hub-pages got the basic "get started" react app.
did it happened to anyone??
first i pushed to code to github. than i:
install github pages : npm install gh-pages --save-dev
set "Homepage": "www.githubAccountname.github.io/reponame";
set "predeploy": "npm run build",
set "deploy": "gh-pages -d build"
than i did "npm run deploy"
and again, i got the "basic start" app, where you can see react logo in the middle
I have tried many times and still cant deploy my react application. These were all the steps that I took:
Install NodeJS + GIT
Create a new repository on Github page (react-website-estate)
In the terminal (VS Code): npm install gh-pages --save-dev
In the package.json file, I added these lines
{
"homepage": "http://simonpham-webdev.github.io/react-website-estate",
"name": "react-website-estate",
...}
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
}
git init
git remote add origin https://github.com/simonpham-webdev/react-website-estate.git
git status
git add .
git commit -m "deploy my react application"
npm run deploy --> then login in the github
git push -u origin master
Go into the github page settings and changed the branch to master And this is what I got: https://simonpham-webdev.github.io/react-website-estate/
This is what I got
This the git path in the settings.json in case it has anything to do with the situation
Images are attached in the blue links above
I would appreciate any help :( Thanks in advance
I'm trying to deploy a react app with gh-pages for the first time and I keep hitting this same problem when I run deploy.
> cvproj#0.1.0 deploy
> gh-pages -d build
Remote url mismatch. Got "/home/savannaha/Desktop/the_odin_project/cvproj/cvproj/git#github.com:savwiley/cvproject.git" but expected "git#github.com:savwiley/cvproject.git" in /home/savannaha/Desktop/the_odin_project/cvproj/cvproj/node_modules/.cache/gh-pages/git#github.com!savwiley!cvproject.git. Try running the `gh-pages-clean` script first.
npm ERR! code 1
npm ERR! path /home/savannaha/Desktop/the_odin_project/cvproj/cvproj
npm ERR! command failed
npm ERR! command sh -c gh-pages -d build
npm ERR! A complete log of this run can be found in:
npm ERR! /home/savannaha/.npm/_logs/2021-03-19T01_29_49_032Z-debug.log
The first thing I did was run gh-pages-clean with node but it doesn't do anything. I've manually deleted the .cache folder in the node_modules, deleted the node_modules folder, uninstalled/reinstalled gh-pages, updated all of the programs I'm using, created a whole new repo, tried to use yarn instead of npm, made sure I didn't have gh-pages installed globally, emptied my computer's .cache folder, and it still comes back with this error.
When I really dug into the code to try to backtrack the problem, I narrowed it down to it coming back with the wrong url when it clones the repo, but I don't know how to fix it.
I originally followed this article on how to use gh-pages. Parts of my package.json:
{
"name": "cvproj",
"homepage": "http://savwiley.github.io/cvproj",
"version": "0.1.0",
...
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
Kind of feel like whatever I'm doing wrong is something really obvious since I was unable to find anyone else with this problem online, unless I just totally missed them. If you know anything, I'd love some help. And if you want to see anything else I didn't think about sharing, just ask. Thank you.
In case anyone else has this problem, I finally resolved the issue with some awesome help.
First, make sure the issue is an isolated one by deploying a bare bones app with nothing added or installed. I went ahead and added everything step-by-step and redeployed every time with no problems, but my older repos still came back with the error.
If you want to deploy your original app:
Make sure all of your dependencies and programs are up to date. Git was tricky because the terminal said it was when it wasn't so check on their site. If you're using Ubuntu, this is a good how-to.
Delete the build folder if it already added one.
Delete the node_modules > .cache > gh-pages folder
Make sure everything is pushed to github.
Make sure your repo doesn't have a github pages site running already.
Run deploy.
I have no idea why but it worked for me. It really feels like I did all of this already but maybe I didn't at the same time? Anyway, I hope no one else has this frustrating problem, but I'll leave this solution here in case it can help someone.
I added the command 'gh-pages-clean' in front of the deploy script. Seemed to fix the issue.
So in your scripts section in the package.json file, replace
"deploy": "gh-pages -d build",
with
"deploy": "gh-pages-clean gh-pages -d build",
then I changed it back to deploy the changes to gh pages
I built an app using React App, to create a monsters Rolodex website. it works fine on my localhost, however, after pushing it to GitHub pages it only shows title and search box. It's missing images and text.
my text editor is VS code, I am on windows pc.
the URL is https://jirehg.github.io/my-monsters-roladex/
Try to push it via gh-pages.
1.add pachage as a dev-dependency via npm install gh-pages --save-dev
2.make sure you add to package.json:
"homepage": "http://{username}.github.io/{repo-name}"
3.make sure to add these scripts to package.json:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
4.Add it as a remote and npm run deploy
I have a repository of react code that I deployed to github pages. The code deployed properly and is showing up at the right url, but the repository completely changed. A static folder was created with a bunch of chunk.js files and whatnot. My problem is that I am unsure how to update my code now that it is full of these strange files.
I'm not exactly sure what I should do. A solution I have in mind is just to redeploy to a different branch every time, though I assume that isn't the most elegant way to do things.
I ran npm run deploy.
What I expected was that after deploying, my regular repository would show up with all the code I wrote, but there's now a static folder with a bunch of chunk files that I have no idea how to work with. Any help would be appreciated.
Follow following steps --
Step 1: Add homepage to package.json
"homepage": "https://myusername.github.io/my-app",
Step 2: Install gh-pages and add deploy to scripts in package.json
npm install --save gh-pages
Add the following scripts in your package.json:
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
Step 3: Deploy the site by running npm run deploy
npm run deploy
Step 4: For a project page, ensure your project’s settings use gh-pages
Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
Step 5: Optionally, configure the domain
mywebsite.com
reference : https://create-react-app.dev/docs/deployment GitHub Pages Section