I have a vue-CLI project. Is there a simple way of viewing requests to the webpack dev server?
i.e. in the console after i've ran npm run dev and I get the message Your application is running here: http://localhost:8081 etc, I would like to see the hits to the webserver
I've added DEBUG='express:*'to my environment variables (windows) but it seems to make no difference.
Windows is funny. The standard approach is to use set VAR=val && webpack-dev-server... but that doesn't work on UNIX. I couldn't come up with a single command that would work on both a Windows and a UNIX shell.
Instead, to keep everything consistent, I'm now using the handy helper module cross-env
It's designed for exactly this purpose, and is easy to use. Just use cross-env where you'd typically use UNIX-style env, and away you go. Mine, for example, looks like:
"scripts": {
"start": "cross-env DEBUG=express:router webpack-dev-server ...."
}
This gives me portable request logging from webpack in development mode.
Related
In VSCode I'm using ftp-simple to upload a directory of static files from a Svelte site.
I would like to automate this, presumably using npm, so that when I run npm run build it also uploads the build folder to the specified ftp.
What can I use for this? ftp-deploy seems likely, but I'm not sure how to configure package.json etc.
Any help would be appreciated.
The documentation for npm scripts explains. Briefly, though:
In package.json, find (or create) the scripts property. Find or add a build property to that. The value should be the command required to upload. That can be a script that you write (using ftp-deploy or something else) or it can be a CLI tool that is installed as a dev dependency or a regular command or set of commands available to your shell.
So you might end up with something like this (but it probably won't be this exactly):
{
"scripts": {
"build": "myAwesomeFtpDeployScript.js"
}
}
I made a Vue app with Bootstrap-Vue, Express(nodejs) and MySQL. I'm using vue-cli and It's currently in development mode. I've created a SPA(server and client in different folders), and I'm compiling with vscode terminal using:
cd client
npm run serve
and
cd server
node index.js
My problem is: I don't have a domain because it's only for personal use(and I don't have money), and to open the vscode and doing the rotine takes 20-60 seconds. Is there an alternative and quickly way to run my vue app?
I can think of a couple of things you can do.
1) Get a free domain and free hosting
As I mentioned in the comments, you can get a free domain at freenom.com, and host it for free with render.com. This has some pros and cons to it.
Pros:
It's free.
You can access it from anywhere.
No need to setup every time, just enter the URL.
Cons:
You probably won't get to choose the domain's extention. It'll probably be a .tk domain or something not very well known.
I believe that you need to renew it annually, but that's with any domain.
Anyone an access it, though it's not like everyone will know about it.
Needs an internet connection, but this isn't a problem if your app already needs internet access to function.
You can also host it with Github. Here's instructions on how to do that, and here's instructions to set up Github pages.
See Deploying a Node Express App or Deploying a Vue.js App for instructions on how to set up hosting on render.com
2) Automate what you are doing now
Typing takes time, and you can create a batch file to run those commands for you. Depending on what OS you are on (I'm doing this for windows), you can create a file, e.g. OpenApp.bat and place inside what you are already doing:
cd C://ABSOLUTE_PATH_TO_CLIENT
npm run serve
cd C://ABSOLUTE_PATH_TO_SERVER
node index.js
start localhost:8080 or whatever the path is
Then just double click it and it'll run these tasks for you. I haven't tested this idea yet so not sure if it'll work.
3) Build your app
A third option would be to build your app, then serve it. This would eliminate the time npm run serve takes, and you can host it instead with serve.
Install serve:
npm install -g serve
...and build your app:
npm run build
...and serve the app:
serve -s dist
It should instantly serve your app without any long processing time.
You can create a batch file to do this also (again, I'm not sure if it'll work):
cd C://ABSOLUTE_PATH_TO_CLIENT
serve -s dist
cd C://ABSOLUTE_PATH_TO_SERVER
node index.js
start localhost:5000 or whatever the path is
This should be faster than option 2...but editing your app requires it being re-built each time to see the changes.
I have very bad internet, so I want to download the api(mongodb, react, nodejs) I need to work on a project on a local computer, tell me if this can be done?
You could probably play with "npm cache add some-package.tar.bz2" or with npm-proxy but it will probably require too much effort (or will not resolve all issues).
Alternative way would be to setup proxy server(for example squid) to keep once downloaded files localy at your server/computer.
This way you configure your system (and tools) to use yours proxy server.
So when vagrant, apt, npm, grunt or some other tool need some file from internet during the build it will download it only once and get it out of the cache of proxy server during subsequent requests.
majority of tools favour environment variables HTTP_PROXY and HTTPS_PROXY.
So you could setup docker container, virtual machine or just service (squid has windows binaries as well) and configure your system to use proxy server, i.e. add environment variables either globaly or in bash file for build process only.
Lets suppose you configured your squid at docker container with IP address 172.17.0.34. then your build script would look like:
#!/bin/bash
export HTTP_PROXY=172.17.0.34:3128
export HTTPS_PROXY=172.17.0.34:3128
npm install
For it to take global effect you could place these two lines into your /etc/environment file:
HTTP_PROXY=172.17.0.34:3128
HTTPS_PROXY=172.17.0.34:3128
I have created an npm package script for npx depcheck and one of its parameters, --ignore, its value is getting very long and I expect will get longer.
"audit:depcheck": "npx depcheck --specials=bin --ignore-dirs=dist,node_modules --ignores=tslint,gts,ts-node,ts-node-dev,typescript,mocha,winston,passport-springcm,passport-box,passport-dropbox-oauth2,passport-google-oauth20,passport-microsoft,mocha,nyc",
Tried: I have tried just simply breaking the very long script into new lines but this approach is not JSON compliant.
Goal: Do the same thing, but readable within 110 character width editor.
You can write a shell script, like (do not copy-paste it exactly, just to get the idea):
#!/usr/bin/env bash
npx depcheck --specials=bin --ignore-dirs=dist,node_modules --ignores=tslint,gts,ts-node,ts-node-dev,typescript,mocha,winston,passport-springcm,passport-box,passport-dropbox-oauth2,passport-google-oauth20,passport-microsoft,mocha,nyc
Name it something descriptive, for example npx_depcheck.sh or something else you want. Then call the shell script from package.json:
"audit:depcheck": "./npx_depcheck.sh",
Note: make sure your script can run: chmod u+x ./npx_depcheck.sh
Edit: as #RobC wrote, this solution expects that the system has a shell. The point is, you can attach any kind of scripts, just keep in mind that different environments have different runtimes and tools (a Node.js script makes sense, since the environment where you want to run your application most likely has Node.JS installed).
Is there an easy way to provide usage information for npm scripts?
Ideally, when I run npm run, I would get output like this (note the description at bottom of each task):
Lifecycle scripts included in product-discovery-service:
start
node server.js
available via `npm run-script`:
watch
run-p watch:build watch:run
Run in development mode and rebuild/restart when changes are made
watch:build
npm run build:dev -- --watch
Probably don't need this (would be nice to be able to omit tasks like this)
watch:run
nodemon --watch build/ --inspect
Probably don't need this (would be nice to be able to omit tasks like this)
prewatch:run
wait-on --log build/server.js
Probably don't need this (would be nice to be able to omit tasks like this)
build
babel server.js --out-dir build/
Build the project
prebuild
rimraf build/
Probably don't need this (would be nice to be able to omit tasks like this)
build:dev
npm run build -- --source-maps
Probably don't need this (would be nice to be able to omit tasks like this)
It looks like npm doesn't support this, but maybe there's a third-party with a solution? I found npm-scripts-help, but it feels clunky.
Short Answer:
Yes you're correct, npm does not provide a built-in feature to include descriptions when running npm run. So, any solution you choose will have some level of "feels clunky" associated with it.
As you've mentioned
npm-scripts-help is a package which can achieve this. I'm not aware of other similar third-party solutions.
Alternative custom solution:
The following steps describe how to write a simple custom Nodejs utility script (without using another third-party package dependency). This script can then be invoked via npm-scripts.
Create a simple Nodejs utility script as follows. Lets name the file usage.js.
usage.js
const usage = `
Lifecycle scripts included in ${process.env.npm_package_name}:
start
node server.js
available via \`npm run-script\`:
watch
run-p watch:build watch:run
Run in development mode and rebuild/restart when changes are made
watch:build
npm run build:dev -- --watch
Probably don't need this (would be nice to be able to omit tasks like this)
watch:run
nodemon --watch build/ --inspect
...`
console.log('%s', usage);
Save usage.js in your projects root directory at the same level where package.json is stored.
Add the following usage script to the scripts section of your package.json:
...
"scripts": {
"usage": "node usage",
...
},
...
Run npm run usage to print the usage info to the console. A script name (i.e. usage) has to be provided with npm run. Unfortunately your ideal of just running npm run will only log npm's simple log - which doesn't include descriptions.
Notes:
On line two in usage.js we reference the package name variable via the part which reads: ${process.env.npm_package_name}
If you change the location of where usage.json is stored in your project directory you'll need to redifine the path to it in your npm-script as required. For example, if you choose to store it in a folder named scripts, which resides in your projects root directory, then your usage script should be defined as follows:
...
"scripts": {
"usage": "node scripts/usage",
...
},
...
Adding ANSI/VT100 Control sequences
You can utilize ANSI/VT100 Control sequences in usage.js to add colors and formatting to the usage log.
For example, in the following usage.js, the codes:
\x1b[1m
\x1b[0m
...are utilized to embolden code snippets and reset the formatting back to default respectively.
Tip: If cross-platform is a requirement I suggest using the ANSI 8/16 Colors (listed at the previous link) only. The formatting codes for bold (\x1b[1m) do not work in Windows cmd.exe using terminals such as Windows Command Prompt or PowerShell.
usage.js (with formatting)
const BOLD = '\x1b[1m';
const NORM = '\x1b[0m';
const formattedUsage = `
Lifecycle scripts included in ${BOLD}${process.env.npm_package_name}:${NORM}
${BOLD}start
node server.js${NORM}
available via ${BOLD}npm run-script${NORM}
${BOLD}watch
run-p watch:build watch:run${NORM}
Run in development mode and rebuild/restart when changes are made
${BOLD}watch:build
npm run build:dev -- --watch${NORM}
...`
console.log('%s', formattedUsage);
You could also consider combining ES6 Template Literals with process.env and package.json vars to reference the values of each npm-script. For example:
`${BOLD}${process.env.npm_package_scripts_watch}:${NORM}`