Published on April 09, 2021
Tagged: #frontend-development
Follow me on twitter for more posts like this
If you’re adding navlinks with react router because you want to set the active class you might find that it doesn’t work. These are the steps I had to take to make this work.
// set the exact property on the route
<Route path={"/"} exact={true} component={SharingLinks} />
// but you also need to add exact={true} to your NavLink from react-router!
<NavLink
to={"/"}
exact={true}
activeClassName="active-menu-item"
>
Sharing Link
</NavLink>
Hi! I'm Darragh ORiordan.
I live and work in Sydney, Australia building supporting happy teams that create high quality software for the web.
I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?
My DevShell tooling will save you 30+ hours configuring your dev environment with all the best modern tools. Get it here
I had an existing app that was scaffolded using create react app (CRA) and extended with craco. CRA didn’t support the tooling I needed so I had to look for an alternative. I found Vite.
There are some incredible improvements in Vite over CRA, including PostCSS 8.0 support so I decided to migrate my production application.
I’ll explain some of the benefits of Vite and describe the steps you need to take to upgrade your application.
If you have a react app you can use env vars like REACT_APP_MY_ENV_VAR in your application and React will automatically pull them in to your app when you build the production application.
This is very useful but if you have variables that change for each environment and your application build takes a long time, you might want to avoid building unnecessarily in CI. For example you might have a QA environment and a Staging environment that have different configuration.
We type-check our code on each build and that was taking 5 minutes+ to build each environment so we had to make it faster. We changed our app from using REACT_APP env vars to using a configuration file that we could quickly write to using CI.
Our CI system is Azure DevOops so the CI scripts here are specifically for Azure DevOps but they apply to most CI systems with small changes.
The real work happens in a Node.js script that would work anywhere.
I received an interesting question yesterday that highlighted how some parts of environment variables in Azure devops are not clear. Here are some things to check if your environment variables aren’t working in azure pipelines.