I'm using browser sync with an Angular SPA. Serving the site looks like this:
gulp.task('serve', function() {
browserSync.init(null, {
server: {
baseDir: './',
middleware: [historyApiFallback()]
}
});
});
This works fine. The use of historyApiFallback (npm module) means browser sync doesn't freak out when going to a new URL path when all it needs to do is continue serving the index.html.
The problem I have is with watching files. I've tried this:
gulp.task('watch', function() {
watch('./src/scss/**/*.scss', function() {
runSequence('build-css', browserSync.reload);
});
});
The watch task does work because the build-css task triggers fine. Then the console logs Reloading Browsers... and just hangs. The browser never gets the CSS injection or reload. What am I doing wrong here?
Note that I'm using gulp-watch not the native gulp watch purposely.
I recommend you to use the lite-server. It is a simple customized wrapper around BrowserSync to make it easy to serve SPAs(you don't even have to configure the history api).
You can use it by simple adding an entry in the scripts object in your package.json and running the following command: npm run dev.
"scripts": {
"dev": "lite-server"
},
The module will automatically watch for changes of your files and keep then sync. So it will work with your gulp, because it will update your browser after the build-css task is executed(because the output files will change).
I am currently using it with angular 1, angular 2 and vue.js and worked fine with all.
Related
I have installed "#vue/cli-plugin-pwa": "^4.5.12", in my package.json, I have also added workbox configuration in my vue.config.js. The problem is, when I'm building the project with npm run build:prd which has my script: vue-cli-service build --mode prod.example, there is no service-worker.js in my dist folder.
this is my vue.config.js:
module.exports = {
// ...other vue-cli plugin options...
pwa: {
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'src/service-worker.js',
// ...other Workbox options...
}
}
}
I've tried to move the pwa plugin configuration inside package.json, but it doesn't work as well. I just can't find my service-worker.js in my dist folder.
The current workaround is I place my service-worker.js inside my pubic folder. The problem with this approach is that the service worker will not be updated at all every time there is a new release. Currently the purpose is to notify the client if the new version is available, but I can't trigger the update event because the service-worker.js is static
I found the problem, #vue/cli-plugin-pwa will only generate service-worker if process.env.NODE_ENV === 'production'. meanwhile in my project, when i run npm run build the NODE_ENV is not automatically set to production but it's still development I don't know what is causing this behavior, but the problem is solved if i add NODE_ENV=production in all of my .env. With this, precache-manifest....js will be generated on every build.
I can't get Next.js' Fast Refresh feature to work with a VS Code Remote Container. I can run npm run dev and see the app running on localhost on my machine, so the container works fine - only the Fast Refresh has no effect at all.
Next.js version: v11.0.1
I tried this both with Windows 10 and Ubuntu 20.04 (on WSL 2).
I already tried to use a custom webpack middleware in the next.config.js like so (see https://github.com/vercel/next.js/issues/2179#issuecomment-316568536):
module.exports = {
webpackDevMiddleware: (config) => {
// Solve compiling problem via vagrant
config.watchOptions = {
poll: 1000, // Check for changes every second
aggregateTimeout: 300, // delay before rebuilding
};
return config;
},
};
...which will trigger a recompile on code changes, but the browser does not update.
Also, the requests to "HMR" are failing:
How to reproduce:
Install the Remote Containers extension
Open any new folder
Open the command palette and type/select "Remote-Containers: Rebuild and Reopen in Container"
Type/select "Node.js"
Type/select version "16" and wait for the container to start
Go to the .devcontainer folder and open the devcontainer.json
Edit the config by adding "forwardPorts": [3002], to make the app available on your host and rebuild the container (via VS Code's command palette)
From the terminal, install Next.js, e.g.: npx create-next-app --use-npm --example with-typescript-eslint-jest my-app
Move all the files from my-app to your VS Code project root folder. This has to be done because create-next-app does not work installing in the project root folder via ., because there's already the .devcontainer folder.
Optional: Create a next.config.js and add the snippet for the Webpack dev middleware as seen above
Edit the package.json script to use a specific port: "dev": "next dev -p 3002", (or, if you use WSL 2: next dev -p 3002 -H ::)
From the terminal, start the app npm run dev
Open the browser on http://localhost:3002
The app is showing. Make changes in the code -> even a recompiled app will not show the changes in the browser. A reload of the page in the browser will show the changes though.
With Create React App, there's an advanced configuration without ejecting (called CHOKIDAR_USEPOLLING), which makes their Fast Refresh work with Remote Containers.
Earlier I created a feature request, but maybe someone already managed to make this work without huge changes in the configuration/setup?
A lot has changed between me noticing this issue and the current version of Next.js (v12.1.6).
I just tried it out again and it finally seems to work! 🥳
I'm going to change my Next.js projects to use devcontainers and maybe other stuff does not work, but at least for Fast Refresh, this topic is solved.
If you're following the steps above, the most basic setup should look like the following. It is based on the default "Node.js v16" devcontainer preconfiguration.
You don't even need to forwardPorts anymore!
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.234.0/containers/javascript-node
{
"name": "My project",
"build": {
"dockerfile": "Dockerfile",
// Update 'VARIANT' to pick a Node version: 18, 16, 14.
// Append -bullseye or -buster to pin to an OS version.
// Use -bullseye variants on local arm64/Apple Silicon.
"args": { "VARIANT": "16" }
},
"settings": {},
"extensions": [
"dbaeumer.vscode-eslint"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",
// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node"
}
In my nuxt js application, I am trying to restart the server files which is in the api folder when a file changes.
In order to that, I've added the following to nuxt.config.js
build: {
watch: ["~/api/index.js"]
}
When I make the changes on the files in API folder server doesn't restarted automatically
I've tried this thread Watch and reload api folder in Vue Nuxt looks similar to my problem but it doesn't worked for me
As suggested here
Watch and reload api folder in Vue Nuxt
just adding
watch: ['api'],
to nuxt.config.js, at the root level, worked for me. Not under build, as you had it.
EDIT
Bizarrely, although I now see the server (and client, for some reason) being started in the console... the new code is not taken! So, that's fairly useless.
The only way to get the code changes is still to ctrl-C and restart from zero.
In my application, I use nodemon.json config
{
"verbose": true,
"ignore": ["node_modules", "dist"],
"watch": [
"app.js"
],
"ext": "js json"
}
I have developed a Sails.js application which is working as expected locally. However, when I deploy it to production (Heroku) the images in the "/assets/images/"-folder cannot be found (404).
I know there are some tasks that transfer the files in the "/assets"-folder to a ".tmp/public"-folder to be accessible when the application is being lifted. The .js- and .less-files are being loaded as expected, but not the images.
How can I make sure that the "/assets/images"-folder is being transferred to the public-folder as well?
I had this issue.
The main idea is to make an uploads folder in .tmp.
And make a symbolic link in public folder leading to uploads.
The problem is that Grunt rewrite all the content of '.tmp/public' every time we lift application.
Thus I made a proper Grunt task which simply creates symlink.
sudo npm install grunt-contrib-symlink
Create Grunt task in tasks/config. And name it smth like symlink.js.
module.exports = function(grunt) {
grunt.config.set('symlink', {
dev: {
src: '.tmp/uploads/**',
dest: '.tmp/public/uploads/'
}
});
grunt.loadNpmTasks('grunt-contrib-symlink');
};
And finally add task to tasks/register/compileAssets.js.
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'symlink:dev'
]);
};
I've been learning Angular for awhile now and am looking into the best ways to modularize the application. I think my understanding of that is going pretty well, but I've looked around for awhile and can't seem to get a good answer as to how all of these .js files get included inside of the index.html without just manually typing out a bunch of tags. I've been looking into Grunt/Gulp and get how those are combining the entire app into one .js file, but for development I'm guessing you don't want to have to re-run grunt or gulp every time you want to update the app.
There are many different options: gulp, grunt, or webpack seem to be the most popular. I tend to use webpack the most these days.
A good setup will typically run a local node server, which will refresh the browser automatically every time you make a change to a file.
There are many yeoman generators that will set this all up for you, or you can find simple examples on github.
The basic idea is to
concatenate all your js files (in proper order so the module definitions go before controllers/services)
minify if for production
copy to a fixed path
include this single js file in your html
during development have your grunt/gulp script watch for changes in js files and re-run the above steps so you don't have to run the grunt/gulp task manually.
Now if you are using gulp here is how you would typically handle above steps
gulp.task('process-js', function () {
return gulp.src(jsFiles, {base: './'})
.pipe(gulpif(isProd, concat('all.min.js'), concat('all.js')))
.pipe(gulpif(isProd, uglify({mangle: true, preserveComments: 'some'})))
.pipe(gulp.dest(deployFolder + '/static/js'))
});
where jsFiles is an array of files/folders that contain your angular app js files
var jsFiles = [
'!static/js/**/*.js',
'!static/js/plugin/**/*.*',
'app/index/**/*module.js',
'app/index/**/*config.js',
'app/index/**/*ctrl.js'
];
Note: use ! prefix to exclude certain files/folders from processing.
isProd is just a flag that indicates whether you are preparing for production or development.
During development I also use BrowserSync to watch any changes to my js files and re-run the gulp task to prepare all.js. It also refreshes the page in browser automatically.
gulp.task('run', function () {
browserSync({
server: {
baseDir: deployFolder
},
open: true,
browser: ['google chrome'],
files: deployFolder + '/**/*',
watchOptions: {
debounceDelay: 2000
}
});
gulp.watch(jsFiles, ['process-js']);
});
gulp.task('default', function () {
runSequence(
'clean',
'run'
);
});
Gulp/Grunt to concat all your angular files.
Create 2 tasks :
a dev build task
concat to one file BUT don't uglify.
a distribution/production task which is the same as dev one but this one uglify the concatenated file.