Ggtcf

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!