We are in the process of deprecating many smaller subdomain app services and serving the same content through our flagship site. This pos...
Windows AzureIf you build .NET Core apps on your Mac and install https certificates to your keychain for development purposes, it’s helpful to know th...
Keychain MacOS CertificatesStandard Polyfills for Front End Getting your JavaScript applications working across all browsers is challenging. If you are writing you...
JavaScript Webpack PolyfillsStatic site hosting is straightforward, and from our experience, less likely to have errors compared to a more dynamic site. While dynami...
Azure StaticSeveral months ago, Bill Boga and I, realized there was a performance enhancement we could make in our infrastructure. We were utilizing ...
.NET PerformanceThis post covers augmenting an authenticated User for use in middleware or when using the [Authorize]-attribute in an MVC-controller. The...
ASP.NET Core IdentitySever AuthenticationIf you’re like me, you aspire to write clean and consistent scss. We use the power of scss for everything from nesting our selectors, cre...
SASSFeature flags can be useful for changing the runtime behavior of an application with minimal impact. Having a UI to toggle the feature fl...
.NET asp.net coreWhat is a machine key? According to https://docs.microsoft.com/en-us/dotnet/api/system.web.security.machinekey?view=netframework-4.7.2 a...
.NET asp.netWe’re in the process of upgrading our infrastructure to run our Azure Web Apps in multiple datacenter locations behind Azure Traffic Mana...
.NET asp.net asp.net coreIt 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...
.NETWe 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!
