I am using webpack to bundle my express server, and would like to utilize the webpack watcher. I am using nodemon to restart my server when the bundle changes.
I can manually run webpack with the watcher in one terminal and start nodemon in a second, but I would, ultimately, like to be able to kick off both processes cleanly using only the "npm start" script.
ex. Webpack Bundles -> Nodemon Starts -> Webpack Watchers Start
Does anybody have any thoughts on this topic?
I ended up creating a custom build script using the Webpack/Nodemon Node APIs as opposed to the CLIs. This option provided much more flexibility for me to customize the terminal output to my liking.
import webpack from 'webpack';
import nodemon from 'nodemon';
import webpackConfig from './webpack.config.babel';
const compiler = webpack(webpackConfig);
compiler.run((runErrors, runStats) => {
console.log(runStats.toString({
cached: false,
colors: true,
assets: true,
chunks: false,
chunkModules: false,
chunkOrigins: false,
errors: true,
errorDetails: true,
hash: false,
modules: false,
timings: false,
warnings: false,
version: false,
}));
console.log();
nodemon({
script: 'build/server.bundle.js',
watch: 'build/server.bundle.js'
}).on('restart', () => {
process.env.NODEMON_STATUS = 'restarted';
});
compiler.watch({}, (watchErrors, watchStats) => {
const hasErrors = watchErrors || watchStats.hasErrors();
if (hasErrors) {
console.log((watchStats.toString({
cached: false,
colors: true,
assets: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
errors: true,
errorDetails: true,
hash: false,
modules: false,
timings: false,
warnings: false,
version: false,
children: false,
reasons: false,
source: false,
})));
}
});
});
process.on('SIGINT', () => {
process.exit(0);
});
process.on('SIGTERM', () => {
process.exit(0);
});
process.on('SIGUSR2', () => {
process.exit(0);
});
process.on('exit', () => {
process.exit(0);
});
If nodemon automatically restart your server on file changes you can use a package called concurrently.
First install concurrently as a dev dependency.
npm i concurrently --save-dev
After that edit your package.json
"start": "**webpack build** && concurrently --kill-others \"nodemon app.js\" \"**webpack watch**\""
ps: I added ** placeholders, you should change the commands between them with your commands which builds and watches.
Related
I recently began a project which uses hardhat. I ran npx hardhat ., and went with the advanced TS project.
Everything works fine, from the types to the solidity compiling, but ESLint always complains...
This is the kind of error I keep seeing:
As you can see the types are there, but ESLint continues to throw errors. This luckily doesn't stop the app to run.
Here is my config file:
module.exports = {
env: {
browser: false,
es2021: true,
mocha: true,
node: true
},
plugins: ['#typescript-eslint'],
extends: ['standard', 'plugin:node/recommended'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12
},
rules: {
'node/no-unsupported-features/es-syntax': [
'error',
{ ignores: ['modules'] }
]
}
}
I've spent a lot of time on this issue, and the best method for me was to remove everything.
1 - Create a .ptettierrc.json file the root of your project.
2 - Run yarn remove eslint-plugin-promise eslint-plugin-node eslint-plugin-import eslint-config-standard eslint-config-prettier
3 - Change your ESLint config to the one below:
module.exports = {
env: {
browser: false,
es2021: true,
mocha: true,
node: true
},
plugins: ['#typescript-eslint'],
extends: ['plugin:prettier/recommended'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12
},
rules: {
'node/no-unsupported-features/es-syntax': [
'error',
{ ignores: ['modules'] }
]
}
}
Keep in mind this is for a fresh config, if you've already changed your config, just remove any mentions of the package we removed on step 2.
How would I have grunt bump, bump the version of multiple files in various folders? When I provide the grunt task more than two files, it only bumps the version for two of the three, and disregards the third.
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
bump: {
options: {
files: ["package.json", "./client/package.json", "./server/package.json"],
commit: false,
createTag: false,
push: false,
globalReplace: false,
prereleaseName: false,
regExp: false
}
}
})
grunt.loadNpmTasks("grunt-bump")
grunt.registerTask('default', ['bump'])
}
I'm getting the following error when trying to build:
Building for production...Error: ENOENT: no such file or directory, stat '/Users/me/Code/project/index.html'
Package: "prerender-spa-plugin": "^3.1.0"
File: vue.config.js:
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname),
routes: ['/'],
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true,
},
renderer: new Renderer({
renderAfterDocumentEvent: 'render-event',
}),
}),
],
};
},
};
I don't have any routes, only a single index.html page.
Also, when I run yarn build and get that error, I try to kill the process in terminal but it keeps returning Building for production... without anything happening, and I have to quit terminal for it to stop.
Edit: I've also tried adding staticDir: path.join(__dirname, './public') but the build hangs without any errors.
Try adding headless: false to your renderer options. This will open a Chromium browser with your specified array of routes. Open the inspector in the Chromium browser and its very likely that you will see errors in the console.
I am working on an existing Ionic project. I am trying to include the Ionic's push notification feature within this project. When I try to run grunt command I get following error
Running "jsbeautifier:files" (jsbeautifier) task
Beautified 53 files, changed 0 files...OK
Running "jshint:files" (jshint) task
./www/js/app.js
18 | var push = new Ionic.Push({
^ 'Ionic' is not defined.
So looks like the ionic JS file under lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js is not getting loaded in grunt. How to fix this? I am new to grunt and ionic, so please help me out. I didn't find any solution in other similar questions.
BTW, the app works fine in browser.
gruntfile.js jshint
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
strict: false,
globalstrict: false,
node: true,
undef: true,
globals: {
angular: true,
cordova: true,
app: true,
StatusBar: true,
CameraPopoverOptions: true,
ionic: true,
Camera: true
},
},
files: {
src: ["*.js", "./www/js/*.js", "./www/components/**/*.js", "!*.min.js", "!./www/**/*.min.js", "!./www/**/**/*.min.js"]
}
},
globals: {
angular: true,
cordova: true,
app: true,
StatusBar: true,
CameraPopoverOptions: true,
Ionic: true,
Camera: true
}
Ionic should have capital I.
I'm implementing my own XML/HTML-reporting tool for test-automation using grunt, jasmine_node and some other tools. Unfortunately I need to run some tasks right after jasmine_node --> in fact I only use jasmine_node for creating junit xml reports :D
The problem is: When jasmine is done with testing, it is exiting the task chain (whether I use forceexit or not). But I need the following tasks to be executed.
See below my config:
jasmine_node: {
options: {
forceExit: true,
match: '.',
matchall: false,
extensions: 'js',
specNameMatcher: 'spec',
includeStackTrace: false,
jUnit: {
report: true,
savePath : "test-automation/test-xml/",
useDotNotation: true,
consolidate: true
}
},
all: ['test-automation/test-specs/']
},
And here comes the chain:
grunt.registerTask('test', ['jasmine_node', 'junit_xml_merge', 'open', 'connect']);
What am I doing wrong here?