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
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
The head of my pulled down development branch is: b81ff687b28d41a897d2f527ffb79ef28c89b7a2
There doesn't appear to be a gulp file
As far as I can tell, QuillJS has never used gulp. The 0.20 branch has a Gruntfile, but it's been removed by the 1.0 branch.
Instead of grunt or gulp, Quill uses npm scripts for its build tasks. You can see them defined in the "scripts" section of the package.json file.
"scripts": {
"build": "webpack --config _develop/webpack.config.js --devtool hidden-source-map",
"start": "npm run build; foreman start -f _develop/procfile",
"test": "npm run build; karma start _develop/karma.config.js",
"test:coverage": "webpack --config _develop/webpack.coverage.js; karma start _develop/karma.config.js --reporters coverage",
"travis": "karma start _develop/karma.config.js --reporters dots,saucelabs"
}
These can be run by the command npm run [name of script], e.g. npm run build. (npm test exists as its own command which is essentially an alias for npm run test; though it handles errors a bit differently)
I have following script in my package.json file which I execute in my cmd by npm run protractor:
"scripts": {
"postinstall": "bower install",
"pretest": "npm install",
"test": "karma start test/karma.conf.js",
"test-single-run": "karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver && node setUp.js",
"protractor": "protractor test/protractor-conf.js",
"postprotractor": "node tearDown.js",
}
If all my e2e test pass, npm runs the entire script - also my tearDown.js. However, in the event of a failure in my protractor tests ("protractor": "protractor test/protractor-conf.js"), npm does not continue to execute my postprotractor file(I need tearDown.js as it closes my backend).
Is there any solution of making npm run the entire script?
You should run your setup script and teardown script as part of protractor in beforeLaunch and afterLaunch, not npm.
If for some reason you absolutely do not want to run it as part of protractor you would have to change the protractor exitCode to '0', either in afterLaunch (example) or by wrapping a script around your protractor run script. However, I highly advise against doing this because then you're just masking errors.