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
Working on an Electron app with React. Right now, to get things started, I run the typical npm start command which runs the react-scripts start script.
This starts the dev server. Once the dev server is started, I open a second terminal window and run a script to start electron npm run start-electron which opens my React app in the Electron window.
This works as expected, but I was curious if there was a way to create a script that would:
Start the dev server
Wait for dev server to be started
Then start electron
I tried setting up a sequential script in package.json but it only starts up the dev server. For example npm run start && npm run start-electron.
This isn't make or break. The two terminal option works fine, just didn't know if this was possible.
Yes it is possible, I use concurrently to do it within my projects
npm i concurrently
and add a new script, let's call it dev for example, then in your scripts:
"dev": "concurrently \"npm run start\" \"npm run start-electron\""
All that remains to do now is npm run dev
I have the exact same situation, and below script work for me (remember to install wait-on)
"scripts": {
"start-reactjs": "PORT=25610 react-scripts start",
"start-electron": "wait-on http://localhost:25610 && electron .",
"start": "npm run start-electron & npm run start-reactjs"
}
you can create a script in the root directory with extension .sh
it could contain all operations for you
npm start
npm run start-electron
The second approach you could create a custom script in package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"customStart":"npm run start && npm run start-electron"
},
to run this script
npm run customStart
You could try start-server-and-test npm module. It has different purpose, but it could work for your scenario.
From documentation:
This command is meant to be used with NPM script commands. If you have
a "start server", and "test" script names for example, you can start
the server, wait for a url to respond, then run tests. When the test
process exits, the server is shut down.
"scripts": {
"start-server": "npm start",
"test": "mocha e2e-spec.js",
"ci": "start-server-and-test start-server http://localhost:8080 test"
}
}
To execute all tests simply run npm run ci.
Another alternative could be concurrently combined with wait-on as #Slim said
From documentation:
wait-on will wait for period of time for a file to stop growing before
triggering availability which is good for monitoring files that are
being built. Likewise wait-on will wait for period of time for other
resources to remain available before triggering success.
I solved it by using concurrently
npm i concurrently
In my package.json
"build": "concurrently \"npm run build-react\" && npm run build-jsx",
I'm using it to build an Adobe extension using react, and I need to bundle my extendscript after the react-scripts build, which would otherwise delete my .jsxbin
How to run jest in create react app before commit? I have found couple articles but they are too complicated , without explaining what to do step by step. Could you please explain me how to make it work
You need to use husky package. Here is basic configuration (put it in package.json). It adds pre-commit hook to your git configuration.
"husky": {
"hooks": {
"pre-commit": "CI=true npm run test",
}
}
You can also consider using lint-staged to lint files which you commit. You can see full configuration here.
Maybe you can utilise some npm packages for this.
So, this is not a direct solution but you can include as many things you want instead of using git commands, shells and yml files
Install package Pre-Commit and install git-cz from npm. Using these you can make use of pre-commit and commit in package.json and desired things to them.
Now you can make use of these packages in your packages.json like below
{
"start": "node index.js",
"pre-commit": "lint-staged",
"commit": "git-cz",
"lint": "eslint . --ext .js,.jsx",
}
For example you want to run test cases then pre-commit: npm run test && lint-staged
Because in our project we needed to update documents, checking style-lint, eslint and test cases, so we were using these combination.
But you should not commit directly using git commit -m "message" but with npm run commit.
Hope, this helps.
To do locally you can just write a script which first runs the tests and pipes the exit code and decides whether to really push or not based on the exit code.
By default npm test runs in interactive mode
To exit after running the tests use CI=true
i.e. CI=true npm test
This worked for me:
npm install --save-dev pre-commit
https://www.npmjs.com/package/pre-commit
Then, in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "CI=true react-scripts test", //<-- update
"eject": "react-scripts eject",
}
Adding CI=true runs all tests without making it interactive
Finally,
"devDependencies": {
"pre-commit": "test"
}
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
so - I have an application which needs 3 command prompt windows open to run - this is for angular (npm start), node (node server) and webdriver (webdriver-manager start) to run. If I do this without jenkins then I can run protractor tests using the normal "protractor " command and all works well.
I thought I'd try putting this into Jenkins (on my windows instance)
So I created a new freestyle project and had the application code checked out from git (as normal) and then used individual "Execute Windows batch command" steps for each of the steps (npm install, npm start, node server, webdriver-amanger update, webdriver-manager start, protractor )
Has anyone got experience of Node and angular with jenkins and is this the best way to run these tests?
Please try something like this. You should modify accoding to what commands you want to run.
on Windows:
Step 1.
npm install
Step 2.
start npm start
Step 3. (will sleep 2 seconds)
ping -n 2 127.0.0.1 >nul
Step 4.
node node_modules/protractor/bin/protractor protractor.conf.js
On Linux:
npm install
this will start and move on without waiting for it to finish
npm start &
will wait for selenium to start
while ! curl http://localhost:4444/wd/hub/status &>/dev/null; do :;
done
and at last
npm test
package.json example:
"scripts": {
"postinstall": "node node_modules/protractor/bin/webdriver-manager update",
"pretest": "npm run tsc",
"test": "npm run protractor",
"protractor": "node node_modules/protractor/bin/protractor",
"start": "node node_modules/protractor/bin/webdriver-manager",
"tsc": "node node_modules/typescript/bin/tsc"
},
https://github.com/andriyze/proTR/blob/master/package.json