Develop Reference

How to put a mandatory check if all environment variables are set in vue js application

How can we make sure before building a vue js application that all environment variables values are set that are mentioned in .env.example ?

A simple solution would be to write a shell script which imports the .env and checks the environment variables.
You can edit package.json and add that script (let's call it check-env.sh to the scripts section:
{
"scripts": {
"serve": "./check-env.sh && vue-cli-service serve",
"build": "./check-env.sh && vue-cli-service build",
"dev": "./check-env.sh && vue-cli-service build --mode development",
"watch-dev": "./check-env.sh && vue-cli-service build --watch --mode development",
"watch": "./check-env.sh && vue-cli-service build --watch --mode production",
"lint": "./check-env.sh && vue-cli-service lint"
},
}
That could be made more elegant with a Webpack plugin, for example, but gives you the option to turn it on and off for the above scripts.
You can add a configureWebpack method to your vue.config.js and make the script a proper module instead, to make it mandatory for each build.
This way you could import it in your vue.config.js and add a call to configureWebpack() which throws an exception if the env variables are not as expected.
// vue.config.js
// Import your script along the other imports in this file...
module.exports = {
configureWebpack: config => {
// Call the check here and throw an exception. This should work.
if (process.env.NODE_ENV === 'production') {
// mutate config for production...
} else {
// mutate for development...
}
}
}

.env for prod and developpment with nodejs

I saw lot of different ways, some looked normal some others looked a bit more patchworked.
Can we use package json script to chose our env variables ? What is the right way to do it with nodeJS and how to do it ?
I have already made an .env. It contains api keys which are global for dev and prod. But I have some variables, the URL variable for exemple, which won't be the same depending on dev or prod.
Here are my scripts in the package.json
...
"scripts": {
"dev": "nodemon app.js",
"prod": "node app.js"
}

Use cross-env package to define a NODE_ENV for the command you are running. e.g. "prod": "cross-env NODE_ENV=production node app.js"
In the code, read the env file based on the NODE_ENV config. FWIW dotenv package can help with reading .env files.

setting up node application for production server using babel

I'm trying to get my first ever node app ready for a production server.
build and serve scripts I'm basing on that given by babel
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"build": "babel server.js -o server_compiled.js",
"serve": "node server_compiled.js",
"dev": "webpack -wd"
}
npm run build
works as expected
npm run serve
results in an error:
some/path/config.js:3
export default{
^^^^^^
SyntaxError: Unexpected token export
This is from a config file that I'm referencing in server.js for port host and db.
Do I build this file also or what have I done wrong?
Any help appreciated.

So, I eventually figured out I had to compile all of the .js files in the app individually. I'm sure there must be automated way to do this but thought I'd leave the solution in case anyone can't find anything else.

Serving Vue.js Server Side Rendering on Node-server

I'm trying to get the Hackernews 2.0 demo up and running on my Digital Ocean droplet, but I fail.
npm run start spins up the server on :8080.
npm run build builds for production.
The defined build tasks are defined here:
"scripts": {
"dev": "node server",
"start": "cross-env NODE_ENV=production node server",
"build": "npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
}
...and the entire repo is here.
But what should I execute to serve as a :80 website?
I asked on Gitter.im, on the Vue-channel, but with zero success.
Anyone?

You don't need to execute anything special. Simply change the definiton of listen port inside the application, on line 89 of server.js
const port = process.env.PORT || 80 // << changed here
or export env Var PORT prior to start. In linux, something like
export PORT=80 && npm start
EDIT:
or even create you own start script on package.json
"start80": "cross-env NODE_ENV=production PORT=80 node server",
(maybe- i dont' know exactly how cross-env works)

How to use nodemon in npm scripts to build and start scripts?

"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon lib/index.js --exec npm run build"
}
Using the command npm run watch results in the following wrong command being run: [nodemon] starting "npm lib/index.js run build"
How would I write a nodemon command that, on reload, transpiles the code using babel and reloads the code?

"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon --exec \"npm run build && node lib/index.js\" -e js --ignore lib/"
}
Then run npm run watch. After this, nodemon will rebuild the project and then restart the server every time source code(.js files) is modified.
--exec specifies what non-node scripts (also works for node scripts as above node lib/index.js) you want nodemon to execute when there is a file change.
-e specifies what file extensions you want nodemon to watch.
--ignore specifies the files/directories you want nodemon to ignore. This option is essential to solve this problem because if you do not specify to ignore this lib/ folder, nodemon will restart infinitely as the compiled files in lib/ are also .js files.

You could simply run your code with babel-node to avoid explicit transpiling.
$ nodemon lib/index.js --exec babel-node --presets=es2015,stage-2
It seems like this is the recommended way to use nodemon with babel.
Please note, running --exec could have unintended side effects when running your development environment remotely of your localhost

You can have two nodemons, one to transpile and the other to run your code. In package.json you can do something like this:
"scripts": {
"serve": "nodemon --watch dist/ ./dist/index.js",
"build" : "nodemon --watch src/ --exec babel ./src --out-dir ./dist --source-maps --copy-files"
},

There is an option to build files with Babel in "watch" mode, let Nodemon monitor just the "build" folder and restart the app upon changes to the compiled output.
{
"name": "app",
"version": "1.0.0",
"private": true,
"dependencies": {},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"nodemon": "^1.19.2"
},
"scripts": {
"build": "babel src --out-dir build --source-maps=inline --verbose",
"start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js"
}
}
This example is taken from GraphQL API Examples repository on GitHub.

"scripts": {
"build": "babel src -d lib",
"start": "nodemon --exec babel-node lib/index.js",
"serve": "npm run build && node lib/index.js"
}
Serve is for production, with npm start what you do is transpile first and then run nodemon.

A better option would be to not use a global install but instead use the package installed locally. This will also help for automation builds that might be setup the same as your local machine per 12 factor app design.
"scripts": {
"watch": "node ./node_modules/nodemon/bin/nodemon.js"
}