didinj / mevn-stack-vue.js-2-example

MongoDB Express.js Vue.js 2 and Node.js Full Stack CRUD Web Application Example
https://www.djamware.com/post/5a1b779f80aca75eadc12d6e/mongo-express-vue-nodejs-mevn-stack-crud-web-application
MIT License
67 stars 40 forks source link

Support for development enviroment and improvements #4

Open robertsLando opened 6 years ago

robertsLando commented 6 years ago

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?

mainstreetmark commented 6 years ago

What file did you add the axios defaults to?

robertsLando commented 6 years ago

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