It can be tricky to run integration tests targeting a web server using the command line. Essentially, we need to: Start the applicati...
JavaScript npmI was trying to get a global .NET Core tool working on my development machine, which just so happens to be running macOS. I also work wit...
.NET macOSWe’ve moved around CSS frameworks in the past few years, Semantic UI for our application layer, and Bootstrap for our static sites. As ou...
SASSNew to the frontend at RIMdev, or looking for more about our Frontend team? Here’s a quick overview of our team, tools, and culture! As ...
Team RIMdev FrontendSimple transitions Vue.js has an extremely helpful was to handle animations in web apps. In a simple example if we want to display somet...
Vue.js JavaScript AnimationsAs web applications have gotten more complex, so has the technologies used to build them. Magic can be good when all works as intended, b...
Webpack JavascriptWe’re in the process of scaffolding out our Microsoft Azure environments using Terraform. We’re looking at deploying consistently from ma...
Azure TerraformRequirement ASP.NET Core 2.2 or 3.0 Why can’t I do this in earlier versions? Read ASP.NET Core 2.2 First Look – Endpoint Routing ...
ASP.NET Core Routing MiddlewareHealth checks in ASP.NET Core are useful for reporting the health of your ASP.NET Core web application. But, this functionality can’t dir...
.NETAs I’ve walked through upgrading a number of solutions to target a new version of the .NET Framework, I’ve compiled a list of helpful ste...
.NETWhat is WSL? Windows Subsytsem for Linux (aka WSL) is an excellent tool for running Linux-based binaries natively in Windows. With the i...
WSL git ASP.NET MVCIn development it is common to not want to share everything in our code. Things like usernames, password, links to an api, and more shoul...
Vue.js JavaScript WebpackIn Vue computed properties are a life saver when it comes to being able to add logic to data that we need to use in the UI. We want to ke...
Vue.js JavaScriptUpdated Solution! Thanks for the post!If you don't want to create a web.config, you can also drive this through the <AspNetCoreHo...
asp.net asp.net coreI, Khalid Abuhakmeh, recently wrote about my [Razor Pages first impressions][khalid] and am mostly positive about the addition to the ASP...
asp.net asp.net core razorWe’re in the process of scaffolding out our Microsoft Azure environments using Terraform. While Terraform does an excellent job creating ...
Terraform OSSTL;DR Explicitly using SqlBulkCopy might never cause this problem since mapping is done manually, but NPoco’s usage does automatic map...
NPoco SqlBulkCopyAs you’re building out an API it’s important to keep response times in check. In many cases slowness is due to database calls, web reques...
Benchmarking OSSWe’ve accomplished so much this year thanks to @VueJS that we wanted to give back to the Vue community in some way. Ritter IM is sponsor...
VueJSEgg Fried Rice is a homey dish in China. In this post, I am going to show you my method to make this simple, quick, and delicious dish. E...
Food chinese cuisineWe operate in a typical QA -> Production workflow on both our front-end and back-end teams. So, what happnes when your front-end is in QA but is pointing to a Production API? Nothing good happens, son… nothing good.
As I’ve mentioned before, we run a few websites built with Jekyll and Vue.js, and recently launched a new site with a similar setup. Since this site had never been released, we hardcoded a handful of QA endpoints into a Vue component. This didn’t present any issues during initial development, but when it was released (and the endpoints were updated to Production) and minor bugs were being worked on, front-end QA was pointing to back-end Production. Not good, especially if data is being manipulated.
Create a .json file to hold your environment specific variables and make them available to your Vue component.
We’re using Netlify to deploy and host this site and have setup a QA and Production build. The build settings allow you to define environment variables, this is where you add the Jekyll environment variable.
JEKYLL_ENV=production
Which would look like this in the Netlify Build & Deploy settings (your development build would obviously be set to development, although I think development might be the default):
In the root of your project create a .json file, something like
environment-variables.json. Within that file we have:
---
---
{% if jekyll.environment == "production" %}
{
"productionUrlA": "https://production-url-a.com",
"productionUrlB": "https://production-url-b.com",
"productionUrlC": "https://production-url-c.com"
}
{% else %}
{
"qaUrlA": "https://qa-url-a.com",
"qaUrlB": "https://qa-url-b.com",
"qaUrlC": "https://qa-url-c.com"
}
{% endif %}
Be sure to open the file with empty front matter so Jekyll knows to process it. When Jekyll builds, environment-variables.json will be in your _site directory with only one set of environment variables ready for your Vue component to use.
{
"qaUrlA": "https://qa-url-a.com",
"qaUrlB": "https://qa-url-b.com",
"qaUrlC": "https://qa-url-c.com"
}
Note: Jekyll will interpret line breaks where your conditional statements are, if that annoys you, start the JSON syntax at the end of the conditional line.
Set the empty data:
data: function() {
return {
environmentVariables: {}
}
}
Fetch your JSON:
created: function() {
fetch('/environment-variables.json')
.then(response => response.json())
.then(response => {
this.environmentVariables = response;
})
.catch(error => {
console.log(error);
});
}
Now your variables are set in the environmentVariables object and ready to be used in your component.
Data crisis averted!
