I am building an application with:
React 16.4.0
Electron 2.0.2
Webpack 4.11.0
webpack-dev-server 3.1.4
This application uses hot-reload (as far as that is currently working...) for development. Every time I want to start my project I have to start 2 tasks right after eachother and it is getting annoying. There has to be a faster way. Is there any way I can start them with 1 node task and they startup after each other?
I must note that the dev server must be done with compiling before the electron app can be started.
package.json
"main": "main.js",
"scripts": {
"build": "webpack-dev-server --config webpack.dev.js --hot",
"start": "SET NODE_ENV=development&& electron ."
},
I've done something like this on a recent project using concurrently.
$ npm i -SD concurrently
And then in your package.json
"scripts": {
"dev-server": "webpack-dev-server --config webpack.dev.js --hot",
"electron-dev": "SET NODE_ENV=development && electron .",
"start": "concurrently --kill-others --names \"webpack,electron\" \"npm run dev-server\" \"npm run electron-dev\""
},
This does not, unfortunately, wait for the bundle to finish. But I find I can just hit reload (Ctrl/Cmd + R) once in the Electron app after the build finishes and I'm good to go.
Related
I have been referencing this post: How can I run multiple npm scripts in parallel?
However, neither of my apps launch with npm run dev. Both apps exit with code 1.
My package.json:
"scripts": {
"start": "ng serve",
"start:lt": "ng serve --configuration=lt",
"dev": "concurrently --kill-others \"npm start\" \"npm start:lt\""
}
And yes, I have concurrently installed.
you can use https://www.npmjs.com/package/foreman module to start app.
first, you need Procfile with commands, you plan to execute in parallel
start: ng serve
start_lt: ng serve --configuration=lt
second, add it to package.json
"scripts": {
"start":"nf start"
}
third - define PORT variable in .env file
PORT=4201
and, finaly, you can start your applicaiton by npm start - it will start foreman executable, that starts both start and start_lt components in parallel
I currently have something like this which runs both my development server and my React app.
"scripts": {
"dev": "run-p yarn proxy:start react-scripts start",
"proxy:start": "nodemon test-proxy.js"
},
I was hoping to to do something like this:
"scripts": {
"predev": "nodemon test-proxy.js",
"dev": "react-scripts start"
},
But due to nodemon never exiting it keeps watching files until you exit the process yourself, the dev script never gets fired.
Is it possible to run predev, let it run in the background (keep running nodemon to watch file changes and preferably keep logging any I/O events) and also run my React start script?
My npm scripts:
"build": "tsc -w -p ./src/server",
"run": "nodemon --watch ./dist/server ./dist/server/app.js",
"start": "concurrently --kill-others \"npm:build\" \"npm:run\""
From VSCode's terminal I can start the app using the start task.
But nodemon starts twice, and restarts multiple times when a file is saved. I assumed it's because the build task hasn't completed yet.
How can I make these work in series, so the one waits for the other? I do not want to use polling.
I'm using Ubuntu 18, node 10.15.0, npm 6.5.0.
Example of my configuration which works well:
package.json:
"start:dev": "nodemon --config nodemon.json ./dist/src/index.js",
nodemon.json:
{
"watch": ["src"],
"ext": "ts",
"ignore": ["src/**/*.spec.ts"],
"exec": "ts-node ./src/index.ts"
}
So I'm working on a project using webpack and wanted to create a script on my package.json to run both dev and production mode from there. I'm a windows user and always use Concurrently to run multiple terminal tasks at the same time.
I set my package.json scripts like this:
"scripts": {
"start": "concurrently \"set NODE_ENV=\" \"webpack --watch\"",
"build": "concurrently \"set NODE_ENV=production\" \"webpack\""
},
The output of this in the terminal is:
set NODE_ENV= exited with code 0
Webpack is watching the files…
...
So basically webpack is working properly, but the variable is not being created/deleted. Both commands are failing.
If I run directly
set NODE_ENV=production
it works, so I'm a bit confused...
Any ideas?
Thanks a lot!
Change:
"start": "concurrently \"set NODE_ENV=\" \"webpack --watch\"",
"build": "concurrently \"set NODE_ENV=production\" \"webpack\""
to:
"start": "NODE_ENV= webpack --watch",
"build": "NODE_ENV=production webpack"
You cannot change the environment in one process and expect it to be changed in another started in parallel. You can only change the env of child processes and only on their startup. Child process always inherits the environment from the parent.
If the above doesn't work on Windows then use cross-env:
npm install --save-dev cross-env
and in package.json use:
"start": "cross-env NODE_ENV= webpack --watch",
"build": "cross-env NODE_ENV=production webpack"
I am using a bare npm ( no grunt/gulp) approach to develop my new MEAN project.
My config is like the following:
File package.json:
...
"start": "nodemon ./bin/www",
"lint": "jshint **/*.js",
"test": "mocha --recursive",
"dependencies": {
...
},
"devDependencies": {
...
},
Before starting, I run an npm start and nodemon starts monitoring my project tree for changes, triggering a restart after each source file change.
So far so good.
But what if I'd like to include - say - the lint and/or the test stages on each restart?
I didn't find any clue nor in the nodemon page nor in the npm one...
So you should have a definition of the start in your package.json to first run lint, then test then the actual run server.
You can find an example in following post:
http://substack.net/task_automation_with_npm_run
you should run the 'npm run monitor' command to start the monitoring and the restart should call the npm run start script.
but basically you want to have (based on your package.json)
"scripts": {
"start": "npm run lint & npm run test & node ./myfile.js",
"lint": "jshint **/*.js",
"test": "mocha --recursive",
"monitor": "nodemon ./bin/www"
.....