I would like to run app.js & gulp watch in a single command, however when I run npm run watch, the terminal stop on listen to port 3000, my gulp watch are not executed.
Below are my files:
packaga.json
"scripts": {
"watch": "node app.js & gulp watch"
}
app.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/build'));
app.listen(3000);
console.log('listen to port 3000');
gulpfile.js
gulp.task('watch', function(){
gulp.watch('./src/*.scss', gulp.series(['styles', 'css']));
})
"node app.js && gulp watch":
This runs the express server, then the gulp command. As long as your server is running the gulp won't be executed I guess.
Maybe take a look at this page:
Starting an express server from within gulp
Related
I tried many times by run the command npm run build,
It gives me .nuxt folder and
when I run the command npm run generate I got a folder named dist
Please let me know how and what to do, to upload web application on Cpanel file manager?
if you're using ssr you should use npm run build or better build your app first on local, then upload the entire file include node_modules but .env file or only .nuxt, node_modules, nuxt.config.js, package.json. then make a new "app.js" file on your app root folder with:
const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const port = process.env.port || 3000;
async function start() {
let config = require('./nuxt.config.js');
//process.env.DEBUG = 'nuxt:*';
const nuxt = new Nuxt(config);
const builder = new Builder(nuxt);
await builder.build().catch(error => {
console.error(error);
process.exit(1);
});
app.use(nuxt.render);
app.listen(port);
};
start();
then fill your nodejs app like so:
app root: your app root folder
app url: your app url
app startup file: app.js
note: you don't need to run the "npm run install". just open your url.
I've looked and tried tons of different commands to get this to work, and nothing seems to do the trick.
I'm trying to get this setup so I can use a pipeline in Azure for a specific environment using settings in the environment specific config.
I've using vue cli 4.4.4. My Layout looks like this :
I've tried
vue build --mode development
vue-cli-service build --mode development
npm run build --development
npm run build -- --mode development
If they end up working, all they do is build in production anyway..
I'm running out commands. I would like it to use the dev.env.js config, it works fine in development when I use:
npm run dev
I've figured it out somewhat.
I can run :
npm run build --mode development
I had to modify the build.js and webpack.prod.config.js files to below:
build.js (grab the command 'development' from process.argv[2])
process.env.NODE_ENV = 'production';
var webconfigEnv = "production"
switch (process.argv[2] || 'production') {
case "development":
webconfigEnv = "dev"
break;
case "test":
webconfigEnv = "dev"
default:
break;
}
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for '+ webconfigEnv +'...')
spinner.start()
webpack.prod.conf.js (switch which config it is using from env in process.argv[2])
var webconfigEnv = "prod"
switch (process.argv[2] || 'production') {
case "development":
webconfigEnv = "dev"
break;
case "test":
webconfigEnv = "dev"
default:
break;
}
const env = require('../config/'+webconfigEnv+'.env')
console.log('Using config -- ../config/'+webconfigEnv+'.env');
I wrote an app using the webpack-boilerplate for vue. The backend handling GET and POST requests is an express-server. IDE is visual studio code.
This is what I did:
$ vue init webpack app
$ cd app
$ npm install
$ npm install axios express body-parser node-sass sass-loader
$ npm install --save-dev concurrently nodemon
app/express/app.js looks like:
//import express from express
var express = require('express')
var app = express()
// sets port 8080 to default or unless otherwise specified in the environment
app.set('port', process.env.PORT || 8080)
var bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(express.static(`${__dirname}/../dist/`))
// Test: curl -X POST -H "Content-Type: application/json" -d '{"path": "bla/blub.txt"}' http://localhost:8081/api/save
app.post('/api/save', function (req, res) {
response = {
msg: 'okay',
data: Math.floor(Math.random() * 10)
};
res.end(JSON.stringify(response))
})
var server = app.listen(app.get('port'), function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
I modified the boilerplate code generated by vue init webpack such that app/components/HelloWorld.vue is:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import Axios from 'axios'
const baseUrl = "http://127.0.0.1:8080/api"
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
async created() {
this.msg = await Axios.post(`${baseUrl}/save`, {"path": "bla/blub.txt"})
.then(response => new Promise(resolve => {
let msg = response.data.msg
resolve(msg)
}))
.catch(error => {
console.log(error)
Promise.reject(error)
})
}
}
</script>
<style lang="scss" scoped>
h1 {
font-weight: normal;
}
</style>
To start development in one command (npm start go) and allow hot reloading, I changed app/package.json (don't know where I copied that from):
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"apiserver": "PORT=8081 nodemon express/app.js",
"go": "concurrently --kill-others \"npm run dev\" \"npm run apiserver\"",
"start": "npm run dev",
"build": "node build/build.js"
},
To start the dev version of the app, I ran:
$ npm run dev # webpack-dev-server starts on port 8080, express on 8081
To avoid CORS-problems, webpack can be configured to proxy express requests. Change app/config/index.js:
proxyTable: {
'/api':{
target: 'http://localhost:8081',
changeOrigin: true,
}
},
One can now run npm run dev from app/ again, everything works fine.
Hence, over to production mode. I run
$ npm run build
$ node express/app.js
Everything runs fine.
(Over time, I added answers found by myself into this question... The original question was: "Configure webpack for vue frontend and express backend (scenario both production and development)")
My question is now:
How to change webpack babel setup such that the node-run file app.js uses ECMA2016 (such that import express from express can be used instead of require ...)?
Thanks for any help!
I'm having an issue with Gulp I just simply want to process sass files, optimize images and watch changes on said sass files. For some reason it does run the sass and imagemin tasks correctly but then it tries to watch and after several seconds it jus exits gulp and I'm back a command line like if I manually stopped the tasks. I don't get any errors or warnings it just ends. This is the gulpfile.js:
var gulp = require('gulp'), //import gulp node package
sass = require('gulp-sass'),
imageMin = require('gulp-imagemin');
function errorLog(error){
console.error.bind(error);
this.emit('end;');
}
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass({
outputStyle: 'compressed'
}).on('error', errorLog))
.pipe(gulp.dest('css'));
});
gulp.task('imagemin', function(){
return gulp.src('img/*')
.pipe(imageMin())
.pipe(gulp.dest('minimg'));
});
gulp.task('watch', function(){
return gulp.watch('scss/**/*.scss', ['sass']);
});
gulp.task('default',['sass','imagemin','watch']);
On command line this is all I see:
[14:02:44] Using gulpfile C:\project-path\gulpfile.js
[14:02:44] Starting 'sass'...
[14:02:44] Starting 'imagemin'...
[14:02:44] Starting 'watch'...
Then after approx. 20secs it exits gulp, I tried looking everywhere and use other post fixes and no luck.
The Jest documentation suggests using npm test to execute tests.
Is there a way of watching your source and tests to rerun Jest tests automatically when relevant files have been changed?
Thanks to Erin Stanfill for pointing out, Jest already has support for automatically re-running. The better configuration for package.json would be
{
"scripts": {
"test": "jest"
}
}
To turn on the watch mode, just use
$ npm run test -- --watch
Or
$ yarn run test --watch
If you have npm test configured, you can just run npm test -- --watch.
As a complement suggestion you can add "--watchAll"
into your package.json file like this:
"scripts": {
"test": "jest --watchAll"
},
Each time you run npm test, the watch mode will be enable by default.
For more info npm CLI docs
Start you tests in watch mode.
jest --watch fileName.test.js
As per documentation
Run tests that match this spec name (match against the name in describe or test, basically).
jest -t name-of-spec
// or in watch mode
jest --watch -t="TestName"
This example shows how to use gulp to run your Jest tests using jest-cli, as well as a tdd gulp task to watch files and rerun Jest tests when a file changes:
var gulp = require('gulp');
var jest = require('jest-cli');
var jestConfig = {
rootDir: 'source'
};
gulp.task('test', function(done) {
jest.runCLI({ config : jestConfig }, ".", function() {
done();
});
});
gulp.task('tdd', function(done) {
gulp.watch([ jestConfig.rootDir + "/**/*.js" ], [ 'test' ]);
});
gulp.task('default', function() {
// place code for your default task here
});
install a couple of Grunt packages:
npm install grunt-contrib-watch grunt-exec --save-dev
make a Gruntfile.js with the following:
module.exports = function(grunt) {
grunt.initConfig({
exec: {
jest: 'node node_modules/jest-cli/bin/jest'
},
watch: {
files: ['**/*.js'],
tasks: ['exec:jest']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-exec');
}
then simply run:
grunt watch
If you want to run a single file in watch mode:
yarn run test --watch FileName.test.jsx
I personally use the npm package jest-watch-typeahead.
You need to do 3 steps:
Install npm packege:
npm install --save-dev jest jest-watch-typeahead
Add to jest.config.js next code:
module.exports = {
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
};
Run Jest in watch mode
yarn jest --watch