How do I make URL used in javascript configurable

Question

I'm new into programming and I have a website that talks with the backend (written in GO). I have to make the url's that are in my javascript, configurable. To be honest I really have no idea how to do this. I never heard of make url configurable before.

What is that and how I can make an url configurable? I'll also insert some code. I work with javascript, vuejs

<script>
/* eslint-disable */
export default {
    name: 'listCakes',
    data() {
        return {
            cakes: [],
            errors: [],
            currentPage: 1,
            alerts: [],
            total_cakes: 1,
            cake_fields: ['id', 'purpose']
        }
    },
    created() {
        this.loadCakes(0, 10)
    },
    watch: {
        currentPage: function (newPage) {
            this.loadCakes(newPage, 10)
        }
    }, 
    methods: {
        newCake(evt) {
            evt.preventDefault();
            window.API.post('https://192.168.78.92:8000/api/v1/cake', '{}')
                .then((response) => {
                    console.log(response.data);
                    this.loadCake(response.data.id)
                })
                .catch((error) => {
                    console.log(JSON.stringify(error))
                })
        }, 
        editCake(record, index) {
            var id = record.id
            this.$router.push({ name: 'editCake', params: { id } })
        },
        loadCake(id) {
            this.$router.push({ name: 'editCake', params: { id } })
        }, 
        loadCakes(currentPage, limit) {
            if (!(Number.isInteger(currentPage) && Number.isInteger(limit))) {
                currentPage = 0
                limit = 10
            }
            var offset = (currentPage - 1) * limit
            window.API.get('cake?offset=' + offset + '&limit=' + limit)
                .then(response => {
                    this.cakes = response.data.cakes;
                    this.total_cakes = response.data.total;
                    console.log(response.data.cakes)
                })
                .catch(e => {
                    this.errors.push(e)
                })
        }
    }
}

It might mean something specific in the context of a GO server, but to me it juts sounds too vague. "Make it configurable" just means "you'll have to use logic to decide what the URL is", right? OK, so... what logic? — TKoL
– TKoL, Commented Mar 14, 2018 at 10:56
Well, the url is now hardcoded: 192.168.78.92:8000/api/v1/cake. I want this URL to be configurable. As location of target site collection that hosts custom list may be different in production so it should be configurable. — omiz
– omiz, Commented Mar 14, 2018 at 11:08
Configurable by who? To be configured before you publish the final javascript file? Configurable by the user of your application? — TKoL
– TKoL, Commented Mar 14, 2018 at 11:24
I have many .vue files where I use the url for: window.API.post('192.168.78.92:8000/api/v1/cake', '{}'). I wanna get rid of the base url '192.168.78.92:8000/api/v1'. How do I make it happen? I wanna use the base usr only once. But what is the logic of it? — omiz
– omiz, Commented Mar 14, 2018 at 14:01
Why don't you just make it a global variable? Or if you need to change it at runtime, make it a function that returns a string, and then make some way of changing what that function returns. — TKoL
– TKoL, Commented Mar 14, 2018 at 15:03

Soham Nakhare · Accepted Answer · 2018-03-14 11:09:52Z

1

Your api url could be split into two parts: 1. service base path (which remains constants) 2. endpoint you want to call

in this url: https://192.168.78.92:8000/api/v1/cake

https://192.168.78.92:8000/api/v1 -> base path /cake -> endpoint you want to call

So you can have a constants file which would export the basePath, something like:

constants.js

export basePath = 'https://192.168.78.92:8000/api/v1'

apiCalls.js

import {basePath} from constants.js
const url = basePath + '/cake'
window.API.post(url , '{}')

answered Mar 14, 2018 at 11:09

Soham Nakhare

4234 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

omiz Over a year ago

Dear Soham, thanks for your answer. But can you please tell me exacally what o do? I have right now two files: listCakes.vue and index.js Shall I insert export basePath = '192.168.78.92:8000/api/v1' in index.js and import {basePath} from index.js const url = basePath + '/cake' window.API.post(url , '{}') in listCakes.vue???I'm really lost.

Soham Nakhare Over a year ago

create a new file constants.js and put export basePath = '192.168.78.92:8000/api/v1'; in it and then do import {basePath} from constants.js

Collectives™ on Stack Overflow

How do I make URL used in javascript configurable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related