remix-env

Easy way to use process.env in your Remix apps

unpublished

Source

npm

Version: 2.0.2

Version published: 3 years ago

Weekly downloads: 23

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

remix-env

Easy way to use process.env in your Remix apps

Setup

`app/entry.server.tsx`

Run npm install remix-env or yarn add remix-env
Add setupEnv in remix.config.js
Using injectEnv to markup in entry.server.tsx

remix.config.js

+ const { setUpEnv } = require('remix-env')

+ setUpEnv()
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  // any configa
}

entry.server.tsx

import { renderToString } from "react-dom/server";
import type {
  EntryContext,
  HandleDataRequestFunction,
} from "@remix-run/node"; // or cloudflare/deno
import { RemixServer } from "@remix-run/react";
+ import { injectEnv } from 'remix-env'

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

+   const markUpWithEnv = injectEnv(markup)

  responseHeaders.set("Content-Type", "text/html");

-  return new Response("<!DOCTYPE html>" + markUp, {
+  return new Response("<!DOCTYPE html>" + markUpWithEnv, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

Usage

Now, You can use the getEnv to get your env

const env = getEnv()

// app/routes/index.tsx
export default function IndexRoute() {
  return (
    <div>
      {env.PUBLIC_ENV_FOO}
    </div>
  );
}

Configuration

By default this library will inject all environment variables with prefix PUBLIC_ENV_ to the browser.

But you can customize it by provide the filter function at createEnv.

const publicEnv = createEnv({ filterEnv: (key, value) => {
  // Only env that starts with PUBLIC_ENV_
  return key.startsWith("PUBLIC_ENV_");
})

Keywords

remix

env

FAQs

What is remix-env?

Is remix-env popular?

Is remix-env well maintained?

Package last updated on 02 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install