CODEWITHSUNDEEP
jsonvue.jslocalhost
Adão Gama
Adão Gama

Reputation: 132

How not to lose a get in json after migrating from localhost to server?

I'm consuming a .json file on my localhost and everything is working fine. However, now I would like to deploy and localhost will no longer work.

This is part of the code:

// BurgerForm.vue

methods: {
  async getIngredients() {

    const req = await fetch("http://localhost:3000/ingredients");
    const data = await req.json();

    this.breads = data.breads;
    this.meats = data.meats;
  },
…
}

In order for me to run localhost I run the following backend in my package.json:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "backend": "json-server --watch db/db.json"
},

The structure of the files I mentioned is like this:

/db/db.json

/src/components/BurgerForm.vue

So how do I keep querying and getting data from json after I migrate to the server?

Upvotes: 0

Views: 105

Answers (1)

Ned
Ned

Reputation: 66

You may find Webpack Dev Server useful.

Assuming you don't mind making your API available under a path on the main system, if you add the following to your vue.config.js:

devServer: {
   //...other options may be necessary
   proxy: {
        "/path/to/api/*": {
             target: "http://localhost:3000",
             secure: false,
             changeOrigin: true
        }
   }
}

Once you start your front-end app using npm run serve if you make a request to the /path/to/api/ingredients targeted at the same server, i.e. fetch("/path/to/api/ingredients"), the dev server will proxy the request to http://localhost:3000/ingredients automatically.

Upvotes: 2

Related Questions