Quasar - Optimize for varied platforms

Currently, I am endeavoring to set up a project with various environments including staging, production, testing, and development. When using Vuejs, this task is quite straightforward.

vue-cli-service build --mode staging

Additionally, I need to create a .env.staging file for the specific environment.

It's important to note that process.env must be accessed from the quasar.conf file in order to establish unique publicPaths for each environment.

Can someone provide guidance on replicating this functionality within Quasar?

Thank you

Answer №1

For those looking to manage multiple environments, consider exploring the @quasar/qenv extension. It appears to provide support for this feature. Check it out at: https://github.com/quasarframework/app-extension-qenv

In my case, where I utilize Firebase Hosting for both staging and production within a single project, I adopted a different approach. I utilized quasar build -d in debug mode for staging, and quasar build for production. Each build generated its own respective dist folder. Additionally, I configured a DEPLOY_MODE environment variable in quasar.conf.js:

build: {
      distDir: ctx.debug ? `dist/${ctx.modeName}-dev` : `dist/${ctx.modeName}`,
      env: {
        DEPLOY_MODE: ctx.prod && !ctx.debug ? 'PRODUCTION' : (ctx.prod && ctx.debug ? 'STAGING' : 'DEV')
      },
...

Incorporating the dotenv extension, I created .env.prod and .env.dev files containing keys specific to production and staging environments (e.g., API_KEY=blah, API_STAGING_KEY=blah). In my boot file, I dynamically selected the appropriate key based on the value of process.env.DEPLOY_MODE:

if(process.env.DEPLOY_MODE === 'staging') {
   const API_KEY = process.env.API_STAGING_KEY
} else {
   const API_KEY = process.env.API_KEY
}

While @qenv may offer a more elegant solution, the above method sufficed for my straightforward project.

Answer №2

When utilizing dotenv, I have found a method to efficiently manage multiple configuration files. By incorporating at least one environment variable (referred to as ENV_VAR), you can dynamically switch between configurations in quasar.conf.js.

const env = require('dotenv').config({ path: `variables.${process.env.ENV_VAR.toLowerCase()}.env` }).parsed

module.exports = function (ctx) {
  // etc.
  build: { // override quasar env
    env: {
      ...env
    },
  // etc.

This setup allows for multiple configuration files to be easily managed:

in variables.dev.env :

VARENV=dev

in variables.stg.env :

VARENV=stg

in variables.prd.env :

VARENV=prd

To implement this solution, simply declare the ENV_VAR and run the application:

export ENV_VAR=stg
 
quasar dev

Please note: If Docker is being used, it may be necessary to build separate images based on each environment or adjust the project during runtime.

Answer №3

While working on my current project, I came across some helpful information regarding the Quasar Framework on their official website.

If you are using VITE, check out this link for handling process env variables:

For those using Webpack, here is a resource on handling process env in Quasar Framework:

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

Retrieve the boolean value associated with a checkbox

I inherited a project from another developer. The code is able to retrieve data from the text input fields in the form, but not from the checkbox inputs. The previous developer implemented these functions (among others): protected function getObjectStrin ...

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

"Error: The functionality of finding places on Google Maps is not

I've encountered an issue while trying to integrate Google Maps into my Node application. The map is loading correctly and I'm able to retrieve my location. However, I am facing a problem with implementing the Google Places API code to allow user ...

Exploring the functionalities of Stripe's latest Search API integrated with metadata features

I'm currently working on a project to showcase products stored in the Stripe Database. I attempted to implement this using if statements, filters, and the new Search API of Stripe, but unfortunately, my attempts were unsuccessful. Any ideas on what el ...

Using AngularJS location.path for unique custom URLs

Control Code: $scope.$on('$locationChangeStart', function () { var path = $location.path(); var adminPath = '/admin/' ; if(path.match(adminPath)) { $scope.adminContainer= function() { return true; }; }); HTML <div clas ...

How to efficiently import Xlsx and csv files using AngularJS

I am looking for a way to extract data in json format from each line of xlsx and csv files using AngularJS. Currently, I am utilizing the angular-file-upload library to access the file as shown below: $scope.LatLongUploader = new FileUploader({ //url ...

Using Vuejs for Seamless Facebook Social Login

Currently utilizing Laravel Vuejs, I'm attempting to implement social login with the vue-social-auth plugin. However, upon clicking the 'login with Facebook' button, a new Facebook window opens but unfortunately the client id and redirect ar ...

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

Executing secure journey within TypeScript

Just came across an enlightening article on Medium by Gidi Meir Morris titled Utilizing ES6's Proxy for secure Object property access. The concept is intriguing and I decided to implement it in my Typescript project for handling optional nested object ...

Limit the usage of Lightning Web Component instances to only one per user

Is there a way to restrict users in Salesforce to using only one instance of a Lightning Web Component? I am new to Salesforce Lightning Web Components and looking for a solution to limit the number of instances a user can create through either permission ...

"Displaying the y-axis in d3.js: A Step-by-Step

I am a beginner in d3.js and I'm having trouble with my y-axis not showing up in the browser. Can someone please help me find a solution? var barOffset=5; var barWidth=50; var width=700,height=700; function processData(data,key){ var objects=[]; ...

Utilizing "Content" for Responsive Image Design in Chrome Version 33.0.1750.117

I previously implemented a method for responsive images on my website, which was working fine until the latest Chrome update. Surprisingly, it still functions properly on other browsers. //< ![CDATA[ var queries = [ ...

Converting JSON data from an XML document using PHP

While I have a decent understanding of xml and json parsing, I'm facing an issue with this particular site. Here is what I have tried: $json_string="http://meteo.arso.gov.si/uploads/probase/www/plus/timeline/timeline_radar_si_short.xml"; $json = fil ...

Is it possible to create a secondary <li> dropdown menu using JavaScript or jQuery from a PHP-generated dropdown menu?

Using a foreach loop to query the database, I have created a drop-down menu. Now, what I want is that when I select a subitem from the menu using JavaScript, I can retrieve the value and make an Ajax request to fetch all the values corresponding to the su ...

Leverage dependency injection with vue / vitest to enhance modularity and

My Software Configuration Developing a Vue 3 application Utilizing Pinia stores Initiating a plugin in my main.ts by using app.use(myPlugin) Creating and providing a repository (MyRepo) in MyPlugin.ts based on specific environment conditions. This reposi ...

Create a custom chrome browser extension designed specifically for sharing posts on

I'm working on creating a basic chrome extension that features an icon. When the icon is clicked, I want the official Twitter window to pop up (similar to what you see here). One common issue with existing extensions is that the Twitter window remains ...

Launch a new tab within the parent window, passing on variables from the parent window

Currently, I have a button that opens a new window in a new tab by using window.open("newpage.html"). In the child window, I use childVar = window.opener.parentGlobalVar to access global variables from the parent window. Now, I have been requested to open ...

Utilize AxiosAbstraction to transmit a Patch request from a Vue.js application to a PHP backend

I need help with sending a PATCH request to update the birthdate of a user (promotor) from Vue.js frontend to PHP backend. The issue I'm facing is that the new date of birth is not getting saved in the database, and the existing date of birth in the d ...

Challenges arise when attempting to return an early resolution within promises in JavaScript

I have a function that determines further execution within itself and needs to use promises since it is asynchronous. An issue arises where the function continues execution even after resolving. Here's my code: function initializeApplication() { ...

Instructions for rearranging the configuration of a 2D array?

A 2-dimensional array is created from a string called matrix: 131 673 234 103 018 201 096 342 965 150 630 803 746 422 111 537 699 497 121 956 805 732 524 037 331 After parsing, it becomes an array of arrays like this: [ [131, 673, 234, 103, 018], [2 ...