Configure webpack for vue such that backend express server is in ECMA2016 - express

Question

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!