webpack - Static javascript app with server side configuration

Question

I'm building a vue app (using vue cli) with no server side rendering.

However the app needs some configuration that cannot be hard-coded or generated at build time, the same build being deployed on many different environnement (QA, preprod, prod, etc.)

I'm trying to find the better way to access configuration.

I'm seeking for advice / ideas on how to achieve this.

Exemple of configuration data

• The url to the backend api
• Configuration for authentification

Considerations

• The app will be deployed on an Azure app service. Client and server parts have to be served from the same host.
• It should be possible to change configuration via Azure Portal (appSettings). This is how it works with almost every application we make, and we want our operation team to work the same way for each application.
• We usually write server-side code in C#. This is what our developpers know best, but I'm open to another solution.
• We would also use the server part to genereate CSP header
• The settings endpoint must be accessible from a known route under the same host, so I can request it without the need of any parameter, e.g. GET /settings.json

Ideas I got so far

Having a node.js server along the client code in the solution.

Pros :

• All is in the same solution, one build, one deploy.

Cons :

• I'm not sure how to make the limitation clear and clean between the vue app (client side) and the server app.
• Not sure how to instruct webpack about this.

C# web app for serving configuration. I could bundle the client app under this website and deploy it.

Pros :

• Server side code and cliend-side code are clearly segregated
• We can the tech we now best for server side (C# in this case)

Cons :

• Merging two project at build time seems kind of weird (although it is possible, I tried it)

question from:https://stackoverflow.com/questions/65905711/static-javascript-app-with-server-side-configuration

Answer 1

You can access configuration by rest api.

It has nothing to do with the server you use in any language, you can choose whatever you want.

Step 1. Create Application settings on portal.

Step 2. List Application Settings.

Step 3. You just need to get key from properties by javascript code.