mevn-stack-vue.js-2-example icon indicating copy to clipboard operation
mevn-stack-vue.js-2-example copied to clipboard

Support for development enviroment and improvements

Open robertsLando opened this issue 6 years ago • 2 comments

This tutorial has been really useful for me so thanks for this! Anyway I had some problems when I have started developing because the only one command provided for dev is npm run dev that only starts Vue and not the API server. In this case I have edited package.json with a new command:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run build && node ./bin/www",
  --->  "start:dev": "concurrently \"npm run dev\" \"nodemon ./bin/www PORT=3000\"", <---
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }

this command uses concurrently package to start both Vue and API server and nodemon to auto restart server on changes.

Another suggestion is for API calls. You use axios.get('http://localhost:3000/book/') but in a production enviroment this will not work when a user visit the page from remote so I have also added this line:

var port = 3000; //API PORT
axios.defaults.baseURL = location.protocol + '//' + location.hostname + ':' + port;

so API calls will look like axios.get('/book').

What do you think about this changes?

robertsLando avatar Feb 20 '18 07:02 robertsLando

What file did you add the axios defaults to?

mainstreetmark avatar May 16 '18 00:05 mainstreetmark

The axios defaults should be used in every file that uses axios, for this reason the best thing should be to create an apis.js file with functions for alla api requests and put the axios default there. I only make api calls in app.js so I have placed the axios default there

robertsLando avatar May 16 '18 10:05 robertsLando