SaaS


This post is a follow-up to our previous post on why you should use [Next.js for your SaaS](/blog/saas/why-you-should-use-nextjs-saas). 

Are you thinking of building your next SaaS project and not sure what to use? This blog post shares our thoughts on why you should consider using Remix, a full-stack framework for building websites currently being developed at Shopify.

## Remix is built by the creators of React Router and React Training

While not as popular as Next.js, Remix is a full-stack framework built by the creators of React Router, the most popular routing library for React. 

The wealth of experience and knowledge of the team behind Remix can be seen in the framework itself: it's a very well-thought-out framework that is easy to use and has a lot of potential.

## Remix is backed by Shopify

Remix has recently been bought by Shopify, which is a huge vote of confidence in the framework. Shopify is the most popular e-commerce platform in the world, and the team behind Remix will be able to leverage Shopify's resources to make Remix even better.

That also means that Remix will become the framework of choice for building custom e-commerce experiences on Shopify, which used to be referred to as "Hydrogen". The team decided to drop their original implementation based on React's Server Components and instead use Remix.

The backing from Shopify will help Remix gain more traction and popularity, which is certainly good for the framework and the community.

### Very simple to get started. It's a router with a few extra features

Remix is definitely a *different* framework, but it's also very simple at the same time. 

The Remix creators say that by learning Remix, you will learn web development and that it's true: Remix adheres to Web Standards and is built on top of the web platform, leaving behind the "express" way like many other frameworks.

Remix can be thought of as a Router with SSR. The API surface is very small and easy to learn, and the documentation is fairly well-written, which should make it easy for you to get started.

### Easy to sell your projects

Given its popularity, selling a SaaS built with Remix and React can be
easier than selling a project made with a more obscure (or less in-demand)
technology.

Being backed by Shopify also means that Remix will be a safe bet for many developers, which will make it easier to sell your projects. With its popularity set to rise, selling a project built with Remix will get simpler and simpler.

## Remix offers all the tools to build a modern SaaS

Remix offers all the tools you need to build a modern SaaS. 

Let's take a look at some of the features that make Remix a great choice for building a SaaS.

### Access to a ton of open-source projects and libraries

Being built using React, you have an incredible number of libraries made by small and large companies at your disposal. 

Remix is no different than Next.js in this regard: you can use any React library you want, and Remix will work with it.

### Serverless and Edge computing

Unlike Next.js, Remix can be deployed to edge computing platforms such as Cloudflare Workers or Deno: which means, you can get incredible performance for your SaaS.

Not only is faster, but it's also cheaper to run your SaaS on edge computing platforms. 

While it's expected that Next.js will follow a similar path, Remix is there today. If you care about maximum performance and minimum cost, Remix is a great choice.

### Remix is very fast

Remix is incredibly performant: it's no wonder Shopify decided to make it the framework of choice for building custom e-commerce experiences on Shopify.

Performance is a key factor for eCommerce stores, so we can expect the Remix team to put a lot of effort into making Remix even faster.

## Conclusion: is Remix a safe bet for your SaaS?

Remix can still be considered the new kid on the block, but at Makerkit we use it with confidence and are happy to bet on it. It's undeniable that the acquisition by Shopify will help Remix gain stability, reduce the risk of the framework disappearing, and make it a safe choice for using it for building your SaaS.

[Makerkit](/) is a SaaS starter template built with Remix for Firebase and Supabase as backends. Our Remix SaaS boilerplate kits can
help you kickstart a SaaS in under 5 minutes and deploy it in a matter of hours.

If you want to build your SaaS with Remix, take a look at one of our kits!


Why you should use Remix for your SaaS

Tutorials


When trying out Remix for the first time, you might have noticed that the `process.env` object is empty. This is because Remix, unlike Next.js, doesn't support loading environment variables in your client-side bundles, and that's by design.

In this tutorial, we'll learn how to set environment variables in Remix, similar to how Next.js works.

## Does Remix support environment variables?

Yes and no.

During development, Remix will load environment variables from a `.env` file at the root of your project, but it **will be ignored when you build your app for production**. Again, it's not a bug or a missing feature, it's a design decision.

The Remix team suggests **not committing this file to your repository**, and instead using a `.env.example` file to show other developers what environment variables are required.

To inject environment variables into your app in production, the recommendation is to solely use the provider of your choice, rather than file-based configuration. For example, if you're using Vercel, you can use their [Environment Variables](https://vercel.com/docs/environment-variables) feature.

## Exposing environment variables to the client in Remix

When you run `remix dev`, Remix will load the environment variables from `.env` and make them available in `process.env` in your code.

Unlike Next.js, Remix doesn't expose these variables to the client-side bundle in any situation. So, if you want to use environment variables in your client-side code, w'll need to manually expose them to the client by adding them as a global variable using the root layout.

### Collecting the environment variables that need to be exposed

Of course, you should never expose all of your environment variables to the client. Instead, you should only expose the ones that you need to use in your client-side code. For example, if you're using a third-party API that requires a public API key, you should expose that key to the client.

For example, we can create a `getBrowserEnvironment` function that returns an object with the environment variables that we want to expose to the client.

```tsx title="routes/root.tsx"
function getBrowserEnvironment() {
  const env = process.env;

  return {
    SITE_URL: env.SITE_URL,
    DEFAULT_LOCALE: env.DEFAULT_LOCALE,
    NODE_ENV: env.NODE_ENV,
    SENTRY_DSN: env.SENTRY_DSN,
    SUPABASE_URL: env.SUPABASE_URL,
    SUPABASE_ANON_KEY: env.SUPABASE_ANON_KEY,
  };
}
```

In the same file, we can add a `script` tag to the `head` of the document that will expose the environment variables to the client.

```tsx title="routes/root.tsx"
<script
  dangerouslySetInnerHTML={{
    __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
  }}
/>
```

Thus, we can access the environment variables in the client-side code using `window.ENV`.

Now, we can create an isomorphic function (i.e. that works on both the client and server) we name `getEnv` that will return the environment variables.

```tsx title="get-env.ts"
function isBrowser() {
  return typeof window !== 'undefined';
}

function getEnv() {
  return isBrowser() ? window.ENV : process.env;
}

export default getEnv;
```

When you need to access the environment variables in your client-side code, you can import the `getEnv` function and use it to access the environment variables.

```tsx title="components/seo.tsx"
import getEnv from '../get-env';

const env = getEnv();

function Seo() {
  return (
    <>
      <meta name="og:url" content={env.SITE_URL} />
    </>
  );
}
```

## Conclusion

In this tutorial, we learned how to set environment variables in Remix, and how to ensure that they're available in the client-side code. We also learned how to create an isomorphic function that will return the environment variables, regardless of whether it's being called on the client or server. This can be useful if you want to use a unified API for accessing environment variables in your code.

If you have any questions or feedback, please reach out! I'm always happy to help.

Remix

Tutorials and Guides about Remix

Why you should use Remix for your SaaS

Setting environment variables in Remix

Authenticating users with Remix and Supabase