Can't deploy React App with gh-pages. "Remote url mismatch." - reactjs

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

Related

pushed code to github main, but github pages got only the basic create-react-app

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

how to deploy react app with github gh-pages

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

Why does my repository change after running 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

Error: yarn start - error Command "start" not found

I am trying to learn React and I am using a private repo to start with it.
I run yarn start in the directory of the repo but I get the error message:
yarn run v1.13.0
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I have both node and yarn installed.
For node:
v10.15.0
node is /usr/local/bin/node
For yarn:
1.13.0
yarn is /usr/local/bin/yarn
I tried to reinstall both node and yarn but I get the same error message. moreover I tried to remove the yarn chance via yarn cache clean but nothing seems to work.
The package.json contains the following:
{
"name": "02-Manipulating-Strings",
"version": "1.0.0",
"author": "ssaunier",
"license": "UNLICENSED",
"private": true,
"devDependencies": {
"eslint": "^4.7.2",
"eslint-config-airbnb-base": "^12.0.0",
"eslint-plugin-import": "^2.7.0",
"jest": "^21.1.0"
},
"scripts": {
"test": "(eslint lib || true) && jest"
}
}
The directory is organised in the following way:
There is no start command inside the scripts of the package.json file.
"scripts": {
"start": "some command to be run", // you need to add this line
"test": "(eslint lib || true) && jest"
}
Maybe you want to run the test command instead - npm test / yarn test?
Just run
yarn add react-scripts
Solved it thanks to the insight of the user: Tsvetan Ganev.
I was trying to run a command that it is not in my scripts. Specifically, yarn start is not in the scripts part of the file package.json.
To solve the issue I added the following line in scripts
"start": "webpack-dev-server --mode development",
I got the same error message "start" command not found. My issue got resolved by following the below mentioned steps.
-open the folder in which you want to create the app using terminal then type these commands:
npm uninstall -g create-react-app
npx create-react-app FolderName
(This will automatically install the latest create-react-app version)
-Then run the command yarn start and it will work.
I had this problem. I figured the best way is this.
npm i -g create-react-app
create-react-app my-react-app //or whatever you want your project to be
cd my-react-app
yarn start
You can also try to run first npm install and then npm run or first yarn and then yarn start
I had the same issue start command not found.
I followed below instruction to recreate react app
. Go to your parent folder in cmd
. Type yarn add create-react-app
. And yarn create-react-app FolderName
After installing yarn start will work.
Well, I was getting this error cause I was dumb Not going inside the main project folder.so it actually not able to find .json file too😁
Adding this to package.json worked for me
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
If you are using create-react-app and encountered this error, chances are you did not install create-react-app successfully.
Try removing globally installed create-create-app as explained below.
Template not provided using create-react-app
check your package.json that has "start" scripts.
if you just have dependency list, make sure you have the following on the package.jons
"devDependencies": {
"#theia/cli": "next"
},
"scripts": {
"prepare": "yarn run clean && yarn build && yarn run download:plugins",
"clean": "theia clean",
"build": "theia build --mode development",
"start": "theia start --plugins=local-dir:plugins",
"download:plugins": "theia download:plugins"
},
"theiaPluginsDir": "plugins",
"theiaPlugins": {
"vscode-builtin-css": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix",
"vscode-builtin-html": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix",
"vscode-builtin-javascript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix",
"vscode-builtin-json": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix",
"vscode-builtin-markdown": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix",
"vscode-builtin-npm": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/npm-1.39.1-prel.vsix",
"vscode-builtin-scss": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/scss-1.39.1-prel.vsix",
"vscode-builtin-typescript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-1.39.1-prel.vsix",
"vscode-builtin-typescript-language-features": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-language-features-1.39.1-prel.vsix"
}
}
otherwise run this on the folder where package.json is
error Command "start" not found.
yarn run theia start /home --hostname 0.0.0.0 --port 8080
theia should start on port 8080 minimally.
If you get error Command "start" not found. after creating new project using create-react-app you most probably would have created the app using npm.
To do it correctly delete the directory of the project and recreate the project using yarn with the following command
yarn create react-app my-app
After that yarn start works perfectly fine.
i got the same issue. it cusses you have installed packages in wrong directory.
in cmd terminal:-(D:\PROJECT)=> my cmd file path shows
D:\PROJECTS\npx create-react-app app-react
(when you enter this command it will create new file named app-react . then you have to go into the app-react file . use this command to go to the that file "cd app-react" then enter. you will see cmd path )
D:\PROJECTS\cd app-react
D:\PROJECTS\app-react\
then install other yarn packges
D:\PROJECTS\app-react\yarn add #chakra-ui/react #emotion/react#^11 #emotion/styled#^11 framer-motion#^4
D:\PROJECTS\app-react\yarn add react-icons
D:\PROJECTS\app-react\yarn add react-router-dom
then yarn start
D:\PROJECTS\app-react\yarn start
if it is won't open check yarn package installed using this command
D:\PROJECTS\app-react\yarn -version
1.22.10
for install yarn
npm install --global yarn
just run following commands:
npm uninstall -g create-react-app
npx create-react-app FolderName
I had a similar problem while I have "start" script in my package.json. Eventually, I figured out that I had not saved the package.json, so I got this error. Obviously, after saving the package.json the problem was resolved.
This issue happens when file "package.json" will gets deleted or changed. Please check your
"package.json" file.
It may sound silly, but I was having this same problem and all I did was close the program (vscode), and reopen it. I made sure it was inside the correct project folder (web) and did the process again. It worked. In my case it was just a lack of attention.
I hope your problem is as simple as mine.
Hug!
i solve the problem whit this:
Since create-react-app 3.3.0 it's not longer recommended to use a global installation of CRA.
However, after following the recommended way, uninstalling CRA globally and using npm,I ran into the following problem for my new React project:
A template was not provided. This is likely because you're using an outdated version of create-react-app.
It seems like CRA wasn't properly uninstalled. I had to do the following:
After uninstalling it with npm uninstall -g create-react-app, check whether you still have it "installed" with which create-react-app on your command line. If it returns something (e.g. /usr/local/bin/create-react-app), then do a rm -rf /usr/local/bin/create-react-app to delete manually.
Afterward, I was able to use npx create-react-app my-app with the latest version of CRA where I would have the default template for the src/ folder
Nov 2020
This might happen when you clone a git repo created with an older version of create-react-app or event with another setup.
First install react-scripts as
yarn add react-scripts
Or
npm install react-scripts
Then if having problem with react-scripts, refer to this SO thread.
Firstly, you can try
npm install
then
You can also try to run first npm install and then npm run or first yarn and then yarn start
I have solved my issues with the following command. Try this command, hope you will get rid of the problems.
npm run start
I also face this error but in my case I think, I have done all the above steps but the error still remaining the last thing I did in my main node_module/.bin/ folder I saw there are two dependencies one is create-react-app it fine but another one is creat-app-react so I deleted this dependency and also remove from my package.json file.
So now yarn start is working perfectly.
just run command
corepack disable
if you ran the following command before
corepack enable
I was outside the project. So I type cd myProject and than yarn run
{
test: /\.scss$/,
include: [/vue-components|views/],
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
],
},
put this in webpack.config.js in module object.
one of the reasons behind this is watch if you are in the right directory type cd your_file_name then type npm run dev
I had the same issue. Just run
npm install --global yarn
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject" },
I found that when I added this into the scripts section package.json dependency; it worked! This way, you'll get the https://localhost:3000 instead of using the 8080 port.
I had this problem and just solved it! Super easy, I hope it helps you:
The problem: "node_modules" was duplicated. You may have accidentally downloaded a duplicated "node_modules" folder when calling yar originally.
Go to "User/#yourname/node_modules" and delete the folder.
just start the app via debug option
enter image description here

React on Github Pages: gh-pages package not working

Problem
I am trying to put my React app on github pages. However, I can't even deploy the app to GitHub pages.
My Setup
I am using Visual Studio Code on my Windows 10 machine. I created my React app with create-react-app. I followed this tutorial to set up my app for Github Pages. This is my package.json:
{
"homepage": "https://MisturDust319.github.io/ign_code_foo",
"name": "ign_code_foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.0",
"gh-pages": "^1.1.0",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4",
"reactstrap": "^5.0.0-beta.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy:": "gh-pages -d build"
},
"devDependencies": {}
}
The full source is available here
What I've Done
To deploy, you are supposed to just run
npm run deploy
However, when I enter that command, from Windows PowerShell, Git Bash, and the Command Prompt, I just get several variations of "command not found".
In response, I uninstalled gh-pages from dev-dependencies and reinstalled it as a normal dependency. No change. At this point, I've exhausted all solutions I can think of, and Google has only pulled up people who didn't include the deploy command in package.json.
You need to install gh-pages globally by adding "-g":
npm install -g gh-pages --save-dev
and then
npm run deploy
Docs: https://docs.npmjs.com/downloading-and-installing-packages-globally
You need install gh-pages before running deploy, run:
npm install --save-dev gh-pages
then
npm run deploy
I cannot add a comment to this post, because I don't have enough score. But there is an error in the your package.json code:
"deploy:": "gh-pages -d build"
Because, there is an extra semicolon :. It should be:
"deploy": "gh-pages -d build"
Little explanation about why this issue is happening ,followed by the fix of this issue
In package.json file
"devDependencies": {
"gh": "^2.8.6",
"pages": "0.0.16"
}
gets created when we run npm install gh pages —save-dev
but to deploy our project when we run npm run deploy that time it checks in package.json file against deploy which script is mentioned
Since in package.json
"scripts": {
"deploy": "gh-pages -d build",
....}
gh-pages -d build script is mentioned.
It will try to perform this operation but the reason its throwing error like this( if you are mac user) on npm run deploy
sh: gh-pages: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! basic#0.1.0 deploy: `gh-pages -d build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the basic#0.1.0 deploy script.
is because gh-pages also need to be installed globally as well.
So if you run npm install -g gh-pages --save-dev
Issue which you're getting related to gh-pages installation will get resolved.
Might be a path problem, it's a usual case for Windows users that try to use cmd instead of *nix terminal. Try to exit and enter cmd if you didn't yet. After that you should ensure that it can access gh-pages package.
Also you might look on answers to a similar question. And ensure that your git version is >= 1.9 as it's told in requirements.
I had copied items into the wrong section. In my case my dependencies are above the scripts and I had put two scripts in the dependencies section like a money. Moving them into the right place resolved the issue for me.
Tip: make sure your script are not placed in the wrong section.
Very, very likely you don't have git added to your Path variable
If running git in your CMD results in an error - this is the issue.
Add git.exe and other binaries to your path, usually it C:\Program Files\Git\bin and try again running gh-pages -d build

Resources