Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

134
Views
Design pattern for server-side (Flask) rendered variabled in javascript module files

I run a Flask web app where I have a domain model (this example Thing) which properties (e.g. rating) could be updated via a HTTP PATCH request. In my development setup I hard coded the API URL where the request must be made to, but this becomes an open source self hosted app so the URL must be generated & set by Flask.

<script type="module">
import {Thing} from './things.js';

// This string must be available inside the Thing class
// The {{ }} syntax with url_for is Flask/Jinja template style (server side)
const API_URL = '{{ url_for('thing_update', id='{0}' }}';

let stars = document.querySelectorAll('.rating .star')
stars.addEventListener('click', function(el){
  // To create an object with object properties, like its id
  let thing = new Thing({{ thing.id }});
  thing.rating = el.getAttribute('value');
})
</script>

My module looks like:

class Entity {
    _API_URL = '';

    async update (data) {
        let response = await fetch(this._API_URL, {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json;charset=utf-8'},
            body: JSON.stringify(data)
        })

        if (!response.ok) {
            throw new Error(`Server response ${response.status}: `)
        } else if (response.status == 204) {
            console.debug('Response success, no content')
            return true
        } else {
            let json = await response.json()
            console.debug('Response success, body content: ', json)
            return json
        }
    }
}

class Thing extends Entity {
    _id = null;
    _rating = null;

    constructor(id) {
        super()

        this._id = id
        // How to get the proper API URL here???
        this._API_URL = super._API_URL.format(id)
    }

    set rating(value) {
        this._rating = value
        this.update()
    }

    async update() {
        console.debug('Update rating to ' + this._rating)
        super.update({rating: this._rating})
    }
}

export {Thing}

I have experience in server side coding (php/python etc) and it just feels "wrong" to set the API URL via the constructor or setter method on the object instance. This should be something as constant on the class level.

However, because I use Flask and don't use javascript for a SPA or something, I struggle how to get this "right". Is there any best practice for this case?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!