Feature 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...
.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 SqlBulkCopyIn today’s front-end ecosystem we are breaking down code into separate files and importing them. This helps us separate out code and reuse it more effectively. Vue does this in components similar to the way React does it. We have been using Vue in our projects lately and we love it so far because it’s progressive in nature. We can do a variety of things from plugging it into existing applications to add new features and give the user a smoother experience to creating full blown SPAs with it. We have run into a few snags, not completely the fault of Vue. Importing components from obscure locations is something that has been around for some time. Dealing with relative paths is not a problem for smaller projects but can become an issue as the project grows. With a little tweaking to our webpack file we can implement a “root path” into our Vue applications.
When you need to import a component that is three or four directories away. For example,
-src
- Calendar
- Components
-Day.vue (current)
- CalendarComponent.vue
- Filters
- DateConversion.js
To import DateConversion.js in the Day.vue component would include the import like the line below,
import TimeConversion from '../../Filters/DateConversion'
We are going to use Vue vue-cli tools to generate a web app. This way we have a folder structure that is standard for everyone. After you are done with your setup the folder structure should look similar too,
In the build/webpack.conf.js folder we are going to find the resolve object and add
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
]
The first item in the array is where we are going to set the “root path” for our application. I chose the src folder because by default this is where our application lives. If you change the folder structure in your own development, don’t forget to update it here. Using the folder structure above and with our modules set, we can now import
Filters/DateConversion
This can clean up our code as the application continues to grow and reduces mistakes when trying to import long relative paths. This doesn’t remove the option for relative path imports either, so now we have the best of both worlds.
