Category: ReactJS
-
Environment Variable is set but I cannot get it from process.env in a react app in production
The WTF Ever got the case where you console.log(process.env) and you see your env variable right there, with the right value, but when you do console.log(process.env.YOUR_VAR) you get a mere empty string? Here’s my story on how I shot myself in the foot and needed 3 days to figure out why my env variable was…
-
See the actual code that makes React Router Serve work
If you run npx react-router reveal in your project with React Router 7+, it will create an entry.server.tsx and an entry.client.tsx file that define how react-router serve works by default for your app.
-
Hosting a remix.run app on a shared hosting with cPanel – pro’s checklist
Prerequisites: be thrifty and decide to save money by hosting a remix app on a classic shared hosting provider (like PHP is still a thing). If you’re lucky, All SHOULD work 🙂 if not – check the stderr.log or dig deeper in the more extensive post.
-
Hosting a Remix App on a Shared Hosting (using cPanel, Phusion Passenger and LiteSpeed)
TL;DR: Short checklist for pros Figuring this out took me longer than I expected, and I was quite surprised that hosting remix apps is not a well-covered topic. Hosting a remix app on a shared hosting provider is even less covered. Backstory – I’m building a native app and a management portal and decided to…
-
A Prisma DB Entry is Missing a field (or it has the value of another field)
I have a remix.run project that uses Prisma and Sqlite for the DB. At a point, I got an entry from the DB, where one of the fields had the value of the other field. The other field had no value, whatsoever. Example: an entry with location and startTime, both strings: the location had a…
-
How to use a Remix form with an action without following its URL
I’m relatively new to remix.run and try to follow the best practices (e.g. use forms for everything). Today I wanted to have a form for an action that does not update the URL. If I kept it with the default form, refreshing the page would lead to an error because I didn’t want to add…
-
VSCode Tip of the Day – Go to References
You can see all the locations in your project that use a React component (or a function), by right-clicking its definition and pressing “Go to References” And a shortcut I need to learn to use more often is Shift+F12 for it 🙂
-
Debugging React Unit Tests in a Monorepo with NX
After using NX for over a year, it’s frustrating that there is very sparse documentation on debugging with VSCode or using it with React. I finally decided to dig into setting up my debugging profile for our unit tests (because I was fed up with console.log – ing them). I found this YouTube video by…
-
Translating strings containing html with react-i18next
We do a lot of React and a lot of translating. Our library of choice for internationalization is react-i18next. Recently we faced a challenge – we needed to render a text with dynamic text inside (based on local variables) but also needed some extra formatting – like a bold text of these specific values. When…
-
NX Dev: neverConnectToCloud is true but NX still connects to the cloud
We are using nx for one of our projects, and it is advocating for enabling the nx-cloud cache. This is fine until you find out you need to claim the workspace and do things you don’t care about. If you fail to do so up to 7 days from the creation time, the builds are…