I’m trying to create project with multiple environments: staging, prod, test + development obviously.
With Vuejs that’s pretty straightforward
vue-cli-service build --mode staging
And create .env.staging file.
Important note that process.env should be accessed from quasar.conf file in order to set different publicPath for each env.
How can I achieve this behavior at Quasar?
Thanks
Check out the #quasar/qenv extension it seems to support multiple environments. https://github.com/quasarframework/app-extension-qenv
Another approach, as I am using Firebase Hosting and both staging and production hosting is in the same project ... I had the idea of using quasar build -d (debug mode) as staging and quasar build as production, each with its own dist folder, and I set a DEPLOY_MODE env variable in quasar.conf.js accordingly:
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')
},
...
I used the dotenv extension and have an .env.prod and .env.dev file. Within .env.prod I define the production and staging specific keys, e.g. API_KEY=blah, API_STAGING_KEY=blah, then in my boot file, I use process.env.DEPLOY_MODE to determine which keys to use in my
production env file.
if(process.env.DEPLOY_MODE === 'staging') {
const API_KEY = process.env.API_STAGING_KEY
} else {
const API_KEY = process.env.API_KEY
}
I suspect #qenv is more elegant but this was enough for my simple project.
Related
Im building an app with Quasar (vue) where I am using .env file to store my keys to the database. I was going to switch to another instance but after I changed the keys in the env file it still calls the old values of the variables. They seemd to be cached in some way.
Im using dotenv to call the env file.
I have tried of course to reset the history in browser as well as running
npm cache clean --force
How can I reset the env files?
Quasar handles env variables through quasar.config.js file, not separate .env files. See the documentation.
quasar.config.js
module.exports = function (ctx) {
return {
// ...
build: {
// passing down to UI code from quasar.config.js
env: {
API: ctx.dev
? 'https://dev.api.com'
: 'https://prod.api.com'
}
}
}
}
As noted in the docs, if you do want to use .env files you'll have to add the dotenv package to your project and point quasar.config.js to use the env variables set with dotenv
build: {
env: require('dotenv').config().parsed
}
How do I use variable defined for the pipeline in React Project?
Currently, I have build variable defined in the .yml file like that
variables:
src: "virtual-furnace-app"
dest: "$(src)/build"
REACT_APP_VERSION: $(Build.BuildNumber)
and in the front end code, I have tried to accessing it like that but it is undefined
export const REACT_APP_VERSION = process.env.NODE_ENV === "development" ? `v${pjson.version} (Development build)` : `v${pjson.version} (${process.env.REACT_APP_VERSION})` ;
After while I found solution myself.
So in the code, I check if we are on localhost NODE_ENV === development and if not I will read variable injected to React script process.env.REACT_APP_VERSION
import pjson from "../../package.json"
export const REACT_APP_VERSION = process.env.NODE_ENV === "development" ? `v${pjson.version} (Development build)` : `v${pjson.version} (${process.env.REACT_APP_VERSION})` ;
Azure Pipeline yml code
REACT_APP_VERSION=$(BuildID) yarn build
How to use Azure Pipeline variable in JavaScript (React) project?
You could try to use a .env file to store the variables, then use them in a React Native app.
You can reference this blog for details : How to gracefully use Environment Variables in a React Native app.
Also find some similar threads in SO, you can reference them can check if that helps:
Azure Devops Variable Substitution for Frontend js applications
How to use environment variables in React app hosted in Azure
Besides, you could also try to set REACT_APP_VERSION in the start of your script as well, e.g. "scripts": { "start": "cross-env REACT_APP_VERSION=$REACT_APP_VERSION react-scripts start" }
I'm using the vue-cli tool to develop vuejs apps, and I'm developing a server too, so i want to build the /dist folder in my server to send it to the browser as static, but I don't even know where the /dist folder is.
There is a webpack.prod.config.js file (I think is the webpack config for production) and in the path-output field I tried to wirte the path but didn't work.
/dist is just a default setting by VueJS. If you want to modify this : as the documentation from VueJS states :
Always use outputDir instead of modifying webpack output.path.
Create a vue.config.js as an optional config file that will be automatically loaded by #vue/cli-service if it's present in your project root (next to package.json).
The file should export an object containing options:
// vue.config.js
module.exports = {
// options...
}
As otheres already stated in the comments, use outputDir to specify the directory where the production build files will be generated in when running vue-cli-service build. Note the target directory will be removed before building (this behavior can be disabled by passing --no-clean when building).
// vue.config.js
module.exports = {
outputDir : ''
}
How do I exclude typescript code from webpack bundle during build-time?
For example, I have this line of code in app.ts (nodejs application):
const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa';
I want when I build my app using webpack configuration to exclude this code.
In webpack version 4 you are able to set mode: 'production' in your webpack config. (https://webpack.js.org/concepts/mode/)
So in your source code you can use the following:
if (process.env.NODE_ENV === 'development') {
const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa';
...
}
In conclusion all code inside if and ifs themself will be automatically removed during building your bundle
Webpack has a mode setting, which allows you to switch between development and production builds.
In your code you can use process.env.NODE_ENV to find out wether you are in production or not, Webpack uses that property to eliminate "production dead code":
// declare variable everywhere to prevent unresolvable variable references
let onlyInDev = "";
// The following should be shaken away by webpack
if(process.env.NODE_ENV === "development") {
onlyInDev = "test";
}
If the value is a sensitive information that should not be leaked to your production build, I would search for it in the bundle to make sure that it doesn't get leaked if the building pipeline changes.
In a node.js project using express framework, usually config folder has 3 files:
config.json - runs in prod env
development.json - runs in dev env
staging.json - runs in stage env
I want to create another config file called example.json and run local dev environment using example.json instead of development.json when ever the code is run with a special environment variable process.env.LOCAL_PROD.
Is there a way to do this?
You can do this with node-config and I highly recommend it as it allows for multiple config files and even hostname based config files. It also supports multiple formats including .js configs not just .json, you can read more about the various setups for configuration files in the node-config wiki. I use it in almost all of my applications that require some configuration due to how easy it is to use.
Now if you don't want to use a package to handle this, then you can do it with just using require() since it can read and parse .json files as well as .js. The common environment variable to use when setting what environment the application is running within is named NODE_ENV.
let config
let env = process.env.NODE_ENV.toLowerCase()
if (env === 'production') {
config = require('./config.json')
} else if (env === 'staging') {
config = require('./staging.json')
} else if (env === 'dev') {
config = require('./development.json')
} else {
console.log('No configurable NODE_ENV detected, no config loaded')
}