To build an ExtJS application using sencha cmd I used the command below
sencha app build
But how I can build using open tooling? The docs is not clean about build application with open tooling.
npm run build should do the job
Check your package.json, you normally have a script section
You could build the app using the commands
npm run build:desktop
npm run build:phone
The above commands used based on the package.json file script section.Below is the snippet of code of script section of package.json file.
"scripts": {
"start": "npm run dev:desktop",
"clean": "rimraf build",
"dev:desktop": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no",
"dev:phone": "webpack-dev-server --env.profile=phone --env.browser=yes --env.verbose=no",
"build:desktop": "npm run clean && cross-env webpack --env.profile=desktop --env.environment=production --env.treeshake=yes",
"build:phone": "npm run clean && cross-env webpack --env.profile=phone --env.environment=production --env.treeshake=yes"
}
We were suffering a lot and spent significant effort to find the tooling what suits our needs the best. Finally we ended up using webpack because there is a large ecosystem around that so it opened up endless possibilities.
Although sencha did some webpack plugins but they are mostly just watching changes. Therefore we have created a webpack loader what is resolving ext's dependencies. This webpack loader will allow to use webpack to build your ext project. There is a small sample to help to configure it.
I have a react app created by create-react-app. After running npm start (the start script is present in package.json as "start": "react-scripts start") the console says Starting the development server as usual and fires up the browser. But after this both the console and the browser do absolutely nothing indefinitely. No error or output. It simply does nothing.
I have something similar happening to me.
I have a react project that I want to convert to Typescript and I started as you noted with the "create-react-app", added all my files and hoped for the best - but got stuck like you on the “Starting the development server” message.
I have an 8GB Ram with Windows 10 and once I used the default "npm start" for the first time I've seen the node process uses a lot of memory - So I tried to give it more and at the same time I tired to change the port react uses.
Added this to the start script in package.json:
"scripts": {
"start": "PORT=3001 react-scripts --max_old_space_size=8128 start",
...
}
Closed all my chrome browsers (they take pretty much memory)
And gave it around 1 minute to run
After 1 minute it started working and from that point it just starts quickly and not uses as much memory and not depended on the port I choose
In my case - I guess the first time you run "npm start" on the React Typescript project it probably index the files (or does something similar - I'm not sure and probably need to read about it - I'm new to typescript) which take a lot of memory.
In your case - It might be something similar
Hope it helps :)
First time you run the command it takes about 5 minutes before the page loads.
Check these two points
Run npm install command before you start the server.
Then if it is still not running, please try the second command
Remove the node modules and run npm install once again.
If these two points didn't work, please provide a screenshot for further analysis.
I created my react app by create-react-app too.
I've tried all the method mentioned above. But it didn't work for me.
Then I accidentally found out if you have unused import or any unused statements. You will stuck.
My react version is 17.0.1.
Make sure that your dependencies in package.json includes the following:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
And scripts to be:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Once you ensure that, you can follow the following steps:
1. npm install
2. npm run build
3. npm start
Hope will works for you.
the same problem as i met; npm start but got stuck like you on the “Starting the development server” message.
after i trying the following ways but didn't worked:
npm install
npm run build
npm start
it seems not the version matter.
finally, i recheck my code, and found the mistake that's the cause of development server fail to start:
useEffect()
this is the hook incorrect using, maybe i forgot to finish it; then i fixed it, and npm run start, it worked, server started successfully.
This is my react version:
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
My node version is 12.18.1, and it didn't work.
I try to change the version to 14.15.0, and then run success.
For me, the problem was the name of the parent directory. For some reason it choked on "#" when I tried to install into a directory named "#TEMP". Switched to another directory with success.
This has previously worked on my old MBP i9, I'm now on a MBP M1 Monterey 12.2.1.
FWIW, I restarted my macbook, changed nothing and everything worked again 🤦♂️🤣
Finally solved this. For me the issue lay in my webpack configuration. I had a webpack alias in there whose alias name was the same as the name of my npm package.
i.e.
My package.json had the following at top.
"name": "#mycompany/react-common-components"
Within my webpack.config.js I had
alias: {
'#mycompany/react-common-components': path.resolve(__dirname, '../src/components')
},
Once I changed the webpack alias to the following everything worked fine
alias: {
'react-common-components': path.resolve(__dirname, '../src/components')
},
I believe you may have some issues with Node and npm.
I would recommend checking the versions first - you’ll need to have Node >= 8.10 and npm >= 5.6 on your machine, and update if needed. It could worth trying to reinstall node.
Checking into node logs could provide some clues on your issue (more information on how to log here)
I was also having the same issue. Try installing a previous version of react-scripts.
npm install react-scripts#2.1.8
Hope this helps!
had the same issue,
I had to build it first
npm build
then
npm start
I was running react on my Mac and had to give permission for the terminal to interact with chrome before it worked.
For me the issue was that I had .css files.
I renamed my css files to .scss and it works.
For some reason create-react-app chokes on CSS files for me.
Weird.
My team also faced this same issue but we managed to solve it.
Run npm install to update packages
then run npm audit fix to fix vulnerabilities
Finally close all browser tab to free up RAM. I have seen node processes take a significant amount of memory.
Run npm start and the development server spins up within a minute or two.
NOTE
Make sure that your dependencies in package.json includes the following:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
And scripts to be:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Once you ensure that, you can follow the steps given above.
I ran into this issue. In my case, there was an .eslintcache file that had incorrect information in it, and was causing an issue. Simply deleting the file solved it for me.
For me, it was because of using StrictMode, the server starts, but the app keeps loading for a long period.
This is my case.
In my react app project I configured eslint with
https://github.com/prettier/eslint-plugin-prettier
After removing minimized source file(in my case, mapbox-gl.js) from the source tree, everything works.
Here are tow points checked:
Remove package.lock and node_modules, re-install: npm i.
Check the node version. Maybe you currently use version is 12.0.0, but this project limited 14.0.0.
I had similar issue. I just opened chrome to check if it's actually running on there (chrome is my default browser for vs code) and npm could then run the next step after that. So try opening the browser if you're stuck on "starting dev...."
This is not so much an answer as how to fix the problem in all cases since I think there are likely multiple things that affect this.
Following the ticket here https://github.com/facebook/create-react-app/issues/12090 allowed me to track down the issue to being something to do with the chunks within the bundles having the same file name.
I was getting timeouts on yarn install and after that worked, getting stuck on Starting development server... which it never did before on this computer.
It may have to do that I am not in the USA, so I set my VPN to Los Angeles and deleted the yarn lock file and the node_modules directory, re-ran yarn install and ran yarn start and everything worked!
this error can occur because of multiple reasons , my particular case (as shown in the picture attached) occurred abruptly when I was installing splide and styled-components probably because of some vulnerabilities
My error was resolved by running
npm audit fix --force
I have made a simple page with React & Redux, which I want to deploy on github.
In my terminal, I write:
npm run build
Then I add
"homepage": "http://myusername.github.io/mynameapp",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
to package.json
Then I install
npm install --save-dev gh-pages
Then I go on my
Github repository => settings => GitHub Pages => select gh pages branch.
Finally, I write
npm run deploy
The page is published, but the result is pure crap. It blends old lines of code - that I actually erased ages ago - with new ones. 100% of the images are either not displayed or not even found. I've checked the build folder, everything is fine. I did add, commit and push my project to the repo before doing the build.
Any help would be highly appreciated!
Please check on which branch you are coding make sure it is master and take a force pull from github.
Also if you want you can try delete your build folder and run deploy after that.
I've been working with a React project using create-react-app and I have two options to start the project:
First way:
npm run start with the definition at the package.json like this:
"start": "react-scripts start",
Second way:
npm start
What is the difference between these two commands? And, what is the purpose of the react-scripts start?
I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?
create-react-app and react-scripts
react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.
with create-react-app you have following features out of the box.
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns about common mistakes.
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
Hassle-free updates for the above tools with a single dependency.
npm scripts
npm start is a shortcut for npm run start.
npm run is used to run scripts that you define in the scripts object of your package.json
if there is no start key in the scripts object, it will default to node server.js
Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.
As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.
The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start-js": "react-scripts start"
},
For clarity, I added a diagram.
The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:
npm run start
npm run build
The grey boxes are commands which can be executed from the command line.
So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.
In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it can also be used to run multiple commands in parallel, which it does here, using the -p <command1> <command2> switch. So, here it executes 2 scripts, i.e. watch-css and start-js. (Those last mentioned scripts are watchers which monitor file changes, and will only finish when killed.)
The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.
The start-js points to the react-scripts start which hosts the website in a development mode.
In conclusion, the npm start command is configurable. If you want to know what it does, then you have to check the package.json file. (and you may want to make a little diagram when things get complicated).
succinctly - it runs this
node node_modules/react-scripts/bin/react-scripts.js start
"start" is a name of a script, in npm you run scripts like this npm run scriptName, npm start is also a short for npm run start
As for "react-scripts" this is a script related specifically to create-react-app
npm start is the short form for npm run start
You can check about it here Difference between npm start and npm run start
react-scripts start
react-scripts is a set of scripts to support the creation, development and testing of react applications. It is used by create-react-app.
create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application.
webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers.
Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically.
You can read more about this topic more on here
I've tried react-app-rewire-less module, but it doesn't work.
react-app-rewire-less-modules but it returns error after install
react-app-rewire-less works.
My problem was that I import "name.less" instead of "./name.less";
UPD
Also for them who are looking for solution - you can use craco
CRA has a documentation for integrating SASS in to it. You can pretty much change SASS tools there to LESS to achieve what you want.
Here's what I did:
I installed less and less-watch-compiler
yarn add less less-watch-compiler
Then add this line to scripts in package.json
"scripts": {
"watch-css": "less-watch-compiler src/ ./",
"start": "react-scripts start",
Now when running
yarn watch-css
When I make a change in src/App.less, corresponding src/App.css is generated.