I'm running a webpack server on virtual box with Ubuntu 15.10 using vagrant over mac OSX.
The webpack config is pretty clean:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var MINIFY = process.env.MINIFY === true;
var FRONTEND_ROOT = './static'
var SRC_PATCH = FRONTEND_ROOT + '/scripts';
var BUILD_PATH = './dist';
module.exports = {
entry: SRC_PATCH + '/main.js',
devtool: 'source-map',
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: [SRC_PATCH, 'node_modules']
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(FRONTEND_ROOT, 'index-template.html'),
minify: MINIFY
})
],
module: {
loaders: [
{
test: /\.jsx|js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
eslint: {
configFile: './.eslintrc'
}
};
Webpack was run on VM by
vagrant#vagrant-ubuntu-wily-64:/vagrant$ webpack-dev-server --port 8080 --devtool eval --progress --colors --hot --content-base dist
And when I edit a file from OSX it doesn't reload, but if I edit the same file from VM it'll reload.
What is the problem? How can I fix it?
I've solved my problem with vagrant rsync-auto
https://docs.vagrantup.com/v2/cli/rsync-auto.html
I'd added the line config.vm.synced_folder ".", "/vagrant", type: "rsync", rsync_auto: true, rsync_exclude: ".git/" to my Vagrantfile, and run vagrant rsync-auto under a separate tab.
This is answered under another question:
https://stackoverflow.com/a/34937378/5114
If you add the --watch-poll option it changes the way webpack looks for file changes.
webpack-dev-server --watch-poll --port 8080 --devtool eval --progress --colors --hot --content-base dist
This makes webpack poll for changes to the files every N milliseconds. Polling works in the Vagrant shared directories when the normal method doesn't because it doesn't look for mtime or other filesystem attributes, just reads the files on an interval. It's slower and uses more cpu/memory, so don't use polling unless you have to.
https://webpack.github.io/docs/cli.html#watch
Long story short: no any changes made to the files on the host system (MacOS) are propagated as events to the guest box synced_folder.
So features relying on filesystem events like Webpack's "hot reload" (webpack-hot-middleware), nodemon's --watch option and so forth won't work.
The underlying reason is, VirtualBox has decided not to implement inotify.
Quote:
The reason is that the host and the guest might have different file systems and vboxsf would have to implement a generic protocol to forward that information from the host to the guest. And this would have to work between many different host/guest combinations. Therefore marking this ticket as "won't fix", sorry.
The workaround is to use rsync as desribed in this answer from Maxim Shepelin.
the first thing you need to see is if in the console where you're running the server, the recompiled process is happening or not. If' not the answer is in the SyncFolder line that #maxim-schepelin said above. If is recompiling and the web page is not reloading maybe the webPack solution.
Edit
Another reason for the folder sync not working the righ way could be this https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers
Related
just wanted to ask if this is possible to change the location folder for recorded file? I am running tests for two different applications, one after another, and when tests are finished for both of them, I can only access the latest recording.
Thanks in advance!
You can add videosFolder attribute in your cypress config file with the folder path.
videosFolder: 'cypress/videos_project_2'
You can override the videosFolder path from the CLI, something like this:
npx cypress run --config videosFolder=cypress/videos_project_2
In your package.json, create two scripts like this:
"scripts": {
"test:project1": "npx cypress run --config videosFolder=cypress/videos_project_1",
"test:project2": "npx cypress run --config videosFolder=cypress/videos_project_2",
}
Then as per the project, directly run the commands:
npm run test:project1
//or
npm run test:project2
The easiest way is to set trashAssetsBeforeRuns.
See Videos
Cypress clears any existing videos before a cypress run. If you do not want to clear your videos folder before a run, you can set trashAssetsBeforeRuns to false.
cypress.config.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
video: true,
trashAssetsBeforeRuns: false
},
});
esBuild makes it pretty easy to serve http requests over it's own dev server, e.g.
require('esbuild').serve({
servedir: 'www',
}, {
entryPoints: ['src/app.js'],
outdir: 'www/js',
bundle: true,
}).then(server => {
// Call "stop" on the web server to stop serving
server.stop()
})
How do I enable HTTPS serving in this case? I can make it serve on port 443, but how do I attach a self-signed certificate?
I've found two solutions, that worked for me:
using http-proxy, in an extra file or inside your esbuild config. The limitation I've found here, you cannot use esbuild's --serve and --watch together (https://github.com/evanw/esbuild/issues/805), so if you need auto reload/live server functionality, you have to create this on your own, which is slightly complicated (https://github.com/evanw/esbuild/issues/802)
httpProxy.createServer({
target: {
host: 'localhost',
port: 3000
},
ssl: {
key: fs.readFileSync('key.pem', 'utf8'),
cert: fs.readFileSync('cert.pem', 'utf8')
}
}).listen(3001);
Using servor, here with npm scripts only, but you can also use servor in an esbuild config. Be aware to name your certificate files servor.crt and servor.key (https://github.com/lukejacksonn/servor/issues/79). I prefer this solution because of even less dependencies, simpler setup and auto reload/live server already build in.
"scripts": {
"build": "esbuild --bundle src/index.tsx --outfile=public/bundle.js",
"start": "npm run server & npm run build -- --watch",
"server": "servor public index.html 3000 --reload --secure"
}
It seems to be a common problem, but after a few days of active searching I didn't find any solution that works in my case.
windows7-x64
node: 6.3.0-x64 (also tried node-v4.4.7-x64)
npm: 3.10.3
webpack: 1.13.1
sublime text (not Vim)
First of all, I can't install fsevents on windows, which might be the problem, because it's the library for watching on OS X.
D:\file>npm install webpack
file#1.0.0 D:\file
`-- webpack#1.13.1
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.0.13
So, if your --watch works on windows, please tell me, do you have the same issue with skipping fsevents when installing webpack?
Secondly, webpack --watch does compile the file, but it doesn't watch at all.
E.g. if I use stylus watch, then it actually blocks my command line until I press ctrl+c
D:\file>stylus -w style.styl
watching C:/Users/...
compiled style.css
watching style.styl
_
And only after ctrl+c it will unblock my keyboard.
^CTerminate batch job (Y/N)? y
stylus-watch
While webpack -w is totally different. It's not just not compiling the file on changes, but it's also not watching at all. I mean that after typing the command webpack --watch it's compiling the file one time, but it doesn't lock my keyboard and so it allows me to write another command.
D:\webpa>webpack main.js bundle.js
D:\webpa>webpack -w main.js bundle.js
D:\webpa>webpack --watch main.js bundle.js
D:\webpa>
webpack-watch
The same with webpack-dev-server - it starts server, but then immediately finishes it.
D:\webpa>webpack-dev-server --hot --inline
http://localhost:8080/
webpack result is served from /
content is served from D:\webpa
D:\webpa>
It looks like the problem is not with webpack.config.js, because it doesn't watch even with a command like webpack --watch main.js bundle.js, but anyway, here is my basic config.
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
};
And I've tried many other variants:
var webpack = require('webpack');
var path = require('path');
var entry = path.join(__dirname, "main.js");
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
context: __dirname,
entry: entry,
output: {
path: __dirname,
filename: "bundle.js"
},
resolve: {root: [__dirname]},
resolve: { fallback: path.join(__dirname, "node_modules") },
resolveLoader: { fallback: path.join(__dirname, "node_modules") },
plugins: [
new webpack.OldWatchingPlugin(),
new WebpackNotifierPlugin(),
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors/js/applibs.js'),
new webpack.optimize.DedupePlugin()
]
};
As I said, the problem seems to be not in webpack.config.js
I've also tried things like:
echo fs.inotify.max_user_watches=524288
webpack-dev-server --content-base ./ --port 9966 --hot --inline
webpack --watch --watch-poll
rename/move/create new folder, reinstall node.js and webpack
So yeah, if you had this issue and you resolved it, please share some info.
Did you have problems with installing fsevents?
Was your webpack --watch command blocking your keyboard and actually watching, but just not compiling files after changes? Or was it finishing watching immediately like in my case?
Any other suggestions what to use apart from --watch and webpack-dev-server?
Thanks!
I'll include this here because it fixed my issue. It may or may not fix yours, depending on if your paths in your post are actually the paths you're using. If it doesn't resolve your issue, at least it'll solve somebodies cause this question comes up first thing for this issue.
You can't have a path with "(" or ")" in it, because the is-glob dependency thinks it's a glob if you do. If you must put your project in a path with "(" (like Program Files (x86)), then you must add something like this to your is-glob module in node_modules:
if (typeof str === 'string' && str.indexOf('Program Files (x86)') > -1)
return false
Have a look at using fswatch. I find myself in the same mess. Windows/Linux cannot support fsevents considering its strictly for OSX. Support for Linux, for example, is through inotify.
It seems fswatch provides a cross-platform filesystem monitor, so you should be all set if you use with your windows machine.
Comparing this to Visual Studio Code all you need to do is allow source maps and VSCode will debug TypeScript however I can't achieve the same on WebStorm.
I can easily debug server side JavaScript in WebStorm but not TypeScript
For anyone else wrestling with debugging TypeScript in WebStorm/IDEA, I had similar frustrations as OP (possibly for different reason). My issue was simply that I didn't set the working directory to the dist folder in the node run configuration. I am running tests in Jest and assumed the working dir should be the root of my project. Set it to dist and debugging started working!
Further info...
Source .ts files in src
Typescript version: 2.0.3
File tsconfig.json:
{
"compilerOptions": {
"jsx": "react",
"module": "commonjs",
"noImplicitAny": false,
"outDir": "dist",
"preserveConstEnums": true,
"removeComments": true,
"sourceMap": true,
"target": "es6",
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"dist"
]
}
Jest config (in package.json):
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/ts-jest/dist/preprocessor.js",
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
}
Run configuration...
Working directory: <project_root>/dist
Javascript file: ../node_modules/jest-cli/bin/jest.js
Application params: --runInBand
Hope it helps!
was trying to find a way to let Webstorm/Intellij to watch the TS file change and restart server in debug mode. Looks like ts-node-dev which IHMO is faster than nodemon in terms of live-reload because it shares Typescript compilation process between restarts.
npm i ts-node-dev --save-dev
Then in your Run/Debug Configuration, add a node.js config with below params:
JavaScript file ---> node_modules/ts-node-dev/lib/bin.js
Applicationi parameters ---> --respawn -- src/script/local.server.ts
Now save the config and run with Debug, you should be able to set break point as well as live reload server on any TS code change.
I wrapped up a small library for this if you happen to develop with aws lambda
https://github.com/vcfvct/ts-lambda-local-dev
Just want to add what worked for me with Webstorm 2021.1.1
I found the easiest way is to go to your package.json and right click the green triangle next to the npm script you want to run. Then select debug.
I am able to apply the breakpoints to my typescript code and it works perfectly. Coming from .Net where it was always pretty straight forward to debug, I am glad to see webstorm making it just as simple.
This is my npm script that I choose to debug.
"dev": "env-cmd -f ./config/dev.env concurrently -k -n COMPILER,NODEMON -c gray,blue \"tsc -w\" \"nodemon -w dist dist/index.js\"",
I'm using a specific version of node called ts-node.
First add in your package.json file:
"devDependencies": {
"ts-node": "8.1.0",
"typescript": "3.2.4"
},
Run npm install and the node_module/.bin/ directory will include the ts-node or ts-node.cmd required for Windows.
Obviously these versions will move. You may see inside the package.json of ts-node project which version of typescript they are using to be the closest as possible.
Then you can add breakpoints. The only downside I see is that you must define the Javascript file (which is a ts file) into the configuration, instead of just right-click + run.
If you have the xyz is not a function error, check that your tsconfig.json file doesn't have "noEmit": false,
For running WebStorm(2017.2.3) debugger around typescript sources I did:
Setup Node.js configuration:
Working directory: root/of/the/project (where located my package.json)
JavaScript file: dist/index.js
I am compiling my TypeScript with gulp-typescript, but more important the source-map files. So for compiling was used task like below:
const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const merge = require('merge2');
const tsProject = ts.createProject('tsconfig.json', {
declaration: true,
typescript: require('typescript'),
});
gulp.task('default', () => {
const result = gulp.src('./app/**/*.ts')
.pipe(sourcemaps.init())
.pipe(sourcemaps.identityMap()) // optional
.pipe(tsProject());
return merge([
result.js
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }))
.pipe(gulp.dest('dist')),
result.dts
.pipe(gulp.dest('dist')),
]);
});
All source TS files located in './app' folder, all compiled files located in ./dist folder. Most important source-files option sourceRoot, wrong value not bring you to ts file.
By sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } I am writing my .map files beside .js files and make reference to app folder. I no need content in .map files because it's already there (app folder).
Thanks to #Ekaterina I was able to run Node debug with Typescript.
I am using grunt and I'm trying to get the watch/livereload task to run on my local server (MAMP) but with no success.
I'm calling the task based on HTML5 Boilerplate grunt files (https://github.com/h5bp/html5boilerplate.com/blob/master/Gruntfile.js, https://github.com/h5bp/html5boilerplate.com/blob/master/package.json).
I have also tried implementing Tiny-lr (https://github.com/mklabs/tiny-lr) without success either.
My connect and watch options right now are this
connect: {
options: {
hostname: 'localhost',
livereload: 35729,
port: 8888
},
livereload: {
options: {
base: '../',
open: true
}
},
},
watch: {
files: '<%= settings.dir.src %>/**',
less: {
files: ['src/less/*.less'],
tasks: ['less'],
},
options: {
livereload: '<%= connect.options.livereload %>'
},
scripts: {
files: ['<%= settings.dir.src %>/js/*.js', 'css/**/*.scss' ],
tasks: 'default',
options: {
spawn: false,
}
}
}
And here I declare the dev task:
// development task
grunt.registerTask('dev', [
'connect:livereload',
'watch'
]);
When I run 'grunt dev' my browser opens at http://127.0.0.1:8888/ and displays only this: Cannot GET /
I need my browser to open http://localhost:8888/ctrl/ (ctrl being the name of the folder project on MAMP, could be anything), I thought that changing the "base" option was the way to go but nope, it is not, and I cannot add "/ctrl" to host name either, nor to the port.
Any ideas?
Thank you
Here is a link to my whole code: https://github.com/zolitariuz/ctrl
i think you are misunderstanding 2 tasks in grunt,
the connect task is used to create a http server spawned by node js, so no php nor mysql support, you DON'T want to run you WP site thru that.
the watch task is looking for changes in files on YOUR computer, launching the according task after a file change, then trigger the live reload.
you should remove connect completely after you copied the live reload object in your watch task.
the you should run your local lamp stack for running wp then start the watch task for file changes.
on the wp side you should enqueue the live reload script, or use a browser extension that will inject it for you.