Creating environment-agnostic builds with the Vue webpack template

When building my Vue projects using a build server, I rely on the npm run build command provided by the Vue 2 template. This template allows me to access environment-specific data configured in files within the config directory, such as prod.env.js. The accessed data is available through process.env.API_PREFIX, according to the template manual.

I am looking for a solution that would enable me to build the code once and deploy the same build (defined by the output in Dist) to multiple servers with different configurations (various API_PREFIX values). Currently, the references to process.env are resolved at build time by the Webpack compiler, necessitating a separate rebuild for each environment.

I have considered various approaches to address this issue. It seems apparent that config loading must occur at runtime, likely involving an AJAX request for static JSON configuration served separately by the web server. I am curious to hear how others would approach this requirement.

javascriptdeploymentbuildwebpackvue.js

Answer №1

It's difficult to provide specific advice without knowing the details of your architecture. However, I can offer some general suggestions.

To achieve your goal in a practical manner, you may need to determine the prefix based on the domain where the frontend is being served.

Here are a few options you can consider, aside from using window.location at runtime:

  • Utilize relative paths such as /api/myinformation - the prefix will be automatically determined by the domain hosting the frontend.
  • During development, consider using a local proxy if running the backend on localhost is not preferred https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md
  • Explore the possibility of implementing proxy path rewrite on nginx or a similar platform:

Even if these suggestions do not directly address your specific situation, hopefully they will inspire new ideas for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically generate nested object properties in VueJS for streamlining code structure

Understanding the Issue I have created a custom system to monitor specific "store" properties from a JSON in a NoSQL database. The structure is fairly straightforward, with nested objects that are necessary for various reasons. The data format resembles ...

javascriptvue.js

Transform a Vue JS Typescript object into an array and then back into an object through iteration

Having an object that contains an array of objects, I am looking to extract the data from each object in the array to show the opening hours. I have successfully accessed each key value within a for loop in the code snippet. However, I am unsure about how ...

arraysobjectfor-loopvue.jsv-for

Encountering problems while executing the command "npm run build."

When I run npm run build, I am encountering the following error: Creating an optimized production build... Failed to compile. HookWebpackError: Cannot read properties of undefined (reading 'e') -- inner error -- TypeError: Cannot read properties ...

reactjsnpmbuild

Troubleshooting incompatibility issues between Tailwindcss and NextJS 12 due to experimental features

When I first started using NextJS 12, I decided to try building a project with tailwind. This is my package.json file: { "name": "test", "version": "0.1.0", "private": true, "scripts": { ...

javascriptreactjsnext.jstailwind-csstailwind-in-js

A step-by-step guide on how to verify a selection using JavaScript

Is it possible to validate the select option with JavaScript? For example, if a user selects "Admin," then the page works for admin login. If they select "Vendor," then it works for vendor login. <table class="login_table" width="100%" border="0" cells ...

phpjavascript

Does adding .catch resolve a promise?

Being new to typescript / javascript, I have limited knowledge about promises. My current scenario involves creating three distinct promises within a cloud-function and subsequently returning them using Promise.all([promise1, promise2, promise3]). Each of ...

javascripttypescriptpromise

When the checkbox is ticked, icheck will make a POST request, but it won't

I am currently experimenting with using icheck to handle POST requests for a temporary table. My goal is to add an entry when a box is checked and remove it when unchecked. Currently, when I check the box, it alerts me and successfully stores the informati ...

javascriptjqueryajax

Tips on choosing filters and leveraging the chosen value for searching in a Vue application

I am currently working on a Vue JS application that allows users to apply filters and search a database. The user can select or type in filters, such as "to" and "from", which are then used in a fetch URL to retrieve data from a json-server. Once the user ...

javascriptvue.jsvue-componentvuetify.jsjson-server

What is the best way to retrieve the request object within a Mongoose pre hook?

Is there a way to have the merchantID in documents automatically set to the logged-in user found in req.user when saving them? product.model.js: const ProductSchema = new Schema({ merchantId: { type: ObjectId, ref: "Merchant", requ ...

javascriptnode.jsmongodbexpressmongoose

What is the process for generating a JavaScript File open dialog box that can display files stored on a server?

On my website, I want clients to be able to access files stored on the server. I need to implement a file open dialog box that displays files available on the server, similar to this code: <input type="file" id="select_file" onchange="openfunction();"& ...

javascriptphpjqueryajaxfile

Swap out the image for a div element if the image is not found

Is there a way to accurately display an image if it's available, and use a div as a replacement if the image is not present? // How can I determine `imageExists` without encountering cross-origin issues? (imageExists) ? (<img class="avatar-img" sr ...

javascripthtmlajaxxmlhttprequestcross-domain

Angular debounce on checkboxes allows you to prevent multiple rapid changes from

Managing multiple checkboxes to filter a dataset can be tricky. I am looking for a way to debounce the checkbox selection so that the filter is only triggered after a certain period of time, like waiting 500ms to a second after the last checkbox has been c ...

javascriptangularjs

Improving the functionality of a dynamic Mongoose JS application

Hey there, I have a pretty simple question that I couldn't find an answer to on Google. So, I'm experimenting with Mongoose JS and I'm curious about how to update a live application. Let's say I've defined a schema in my node.js ...

javascriptnode.jsmongodbexpressmongoose

focusing on a specialized format using the serialize() method

Following up on my previous question which was answered so promptly by Meder, there is now an additional query that has arisen while creating a reusable jQuery form submission without redirecting the user. Issue The jQuery serialize() function is applyin ...

javascriptjquery-pluginsjqueryjquery-forms-plugin

Events bound to JSX elements created in an array map are not being triggered by React

My current task involves working on a compact react + typescript (1.6) application designed for editing slideshows. The functionality of the app is straightforward. A sidebar on the left displays all existing slides, and upon clicking, a canvas appears on ...

javascriptreactjstypescript

javascript image alert

I want to upgrade a basic javascript alert to make it look more visually appealing. Currently, the alert is generated using if(isset($_GET['return'])) { // get a random item $sql = "SELECT * FROM pp_undergroundItems AS u LEFT JO ...

javascriptjquery

Angular multiple checkbox array iteration in ng-repeat

I am currently working on a form using Angular and facing a challenge with a specific section. Within the form, there is a 'Divisions' segment that includes a list of checkboxes generated dynamically from an API call. Users are required to selec ...

javascriptformsangularjscheckbox

Is it beneficial to create a separate component for React form elements?

I've come across advice that suggests when unsure, turning an element into a component is a good idea. But what are the actual benefits of converting form elements like <input /> into components? Let's consider the following example: cons ...

javascriptreactjs

Update breadcrumbs dynamically by clicking on each horizontal panel

I've been dealing with a problem for the past 24 hours. I want to implement a horizontal accordion with breadcrumbs on a webpage. How can I achieve this dynamically, so that when a user clicks on any link in the accordion, the breadcrumbs update simul ...

javascriptjqueryhtmlcssbreadcrumbs

Sending a variable to a VueJS component

I'm looking to pass a variable down to a component in my current setup. Here's the structure: Main: Meet.vue <html> <div class="carousel-cell"> <Category :searchTerm="woman"></Category> </div> <div cla ...

javascriptvue.jsvuejs2vue-component