SolidJS•11mo ago•

46 replies

renderToString in Elysia BFF Layer

Random question, I have a Solid SPA with a BFF server (implemented using Elysia) -- so this is not Solid Start. This all lives under a single repository with the following root, high-level structure:

- shared (contains things shared across both Elysia BFF and Solid SPA)
- server (Elysia BFF: contains only normal TypeScript files)
- src (SolidJS SPA: contains TSX files)
- tsconfig.json (TS config for entire repo)
- vite.config.ts (Vite config for SPA)

- shared (contains things shared across both Elysia BFF and Solid SPA)
- server (Elysia BFF: contains only normal TypeScript files)
- src (SolidJS SPA: contains TSX files)
- tsconfig.json (TS config for entire repo)
- vite.config.ts (Vite config for SPA)

I am in the process of integrating an email verification feature in my Elysia server. I am sending the email using Resend like so:

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: `<p>Click <a href="${url}">here</a> to verify your email.</p>`
});

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: `<p>Click <a href="${url}">here</a> to verify your email.</p>`
});

The question I have is related to that

html

html

field. I would like to use a SolidJS component to layout the HTML structure of the email content leveraging the

renderToString

renderToString

Solid API. This would add a single

.tsx

.tsx

file in that layer. That'll convert things to the following:

// VerifyEmail.tsx (note the TSX extension)
import { renderToString } from "solid-js/web"

export const Email = (props: { url: string }) => {
  return (
    <html>
      <body>
        <h2>Onboarding</h2>
        <p>
          Click <a href={props.url}>here</a> to verify your email.
        </p>
      </body>
    </html>
  )
}

export const getEmailTemplate = (url: string) => renderToString(() => <Email url={url} />)

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: getEmailTemplate(url);
});

// VerifyEmail.tsx (note the TSX extension)
import { renderToString } from "solid-js/web"

export const Email = (props: { url: string }) => {
  return (
    <html>
      <body>
        <h2>Onboarding</h2>
        <p>
          Click <a href={props.url}>here</a> to verify your email.
        </p>
      </body>
    </html>
  )
}

export const getEmailTemplate = (url: string) => renderToString(() => <Email url={url} />)

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: getEmailTemplate(url);
});

I put my component in a separate module within my Elysia BFF layer and imported the

getEmailTemplate

getEmailTemplate

in my module that sends the email. But when I run the code, I get the following error:

ReferenceError: React is not defined
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/Email.tsx:16:71)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:559:34)
      at createRoot (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/dist/server.js:58:14)
      at renderToString (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:557:14)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:53:15)
      at sendVerificationEmail (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:48:37)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/better-auth/dist/api/index.mjs:238:52)

ReferenceError: React is not defined
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/Email.tsx:16:71)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:559:34)
      at createRoot (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/dist/server.js:58:14)
      at renderToString (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:557:14)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:53:15)
      at sendVerificationEmail (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:48:37)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/better-auth/dist/api/index.mjs:238:52)

This is my first time doing something like this and not sure what the proper way to do it is. A few thoughts:

- Why the heck is

React

React

called out when I am using SolidJS? Feels like IDEs assume React too much

- Is this the way I should be doing things? Am I allowed to have the convenience of using a component here?
- If it is possible, what do I need to be aware of when it comes to bundling the server now that I have a SolidJS component living there when I didn't have any before?

Appreciate any input and insights here.

SolidJS•11mo ago•

46 replies

danchez

renderToString in Elysia BFF Layer

Random question, I have a Solid SPA with a BFF server (implemented using Elysia) -- so this is not Solid Start. This all lives under a single repository with the following root, high-level structure:

- shared (contains things shared across both Elysia BFF and Solid SPA)
- server (Elysia BFF: contains only normal TypeScript files)
- src (SolidJS SPA: contains TSX files)
- tsconfig.json (TS config for entire repo)
- vite.config.ts (Vite config for SPA)

- shared (contains things shared across both Elysia BFF and Solid SPA)
- server (Elysia BFF: contains only normal TypeScript files)
- src (SolidJS SPA: contains TSX files)
- tsconfig.json (TS config for entire repo)
- vite.config.ts (Vite config for SPA)

I am in the process of integrating an email verification feature in my Elysia server. I am sending the email using Resend like so:

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: `<p>Click <a href="${url}">here</a> to verify your email.</p>`
});

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: `<p>Click <a href="${url}">here</a> to verify your email.</p>`
});

The question I have is related to that

html

html

field. I would like to use a SolidJS component to layout the HTML structure of the email content leveraging the

renderToString

renderToString

Solid API. This would add a single

.tsx

.tsx

file in that layer. That'll convert things to the following:

// VerifyEmail.tsx (note the TSX extension)
import { renderToString } from "solid-js/web"

export const Email = (props: { url: string }) => {
  return (
    <html>
      <body>
        <h2>Onboarding</h2>
        <p>
          Click <a href={props.url}>here</a> to verify your email.
        </p>
      </body>
    </html>
  )
}

export const getEmailTemplate = (url: string) => renderToString(() => <Email url={url} />)

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: getEmailTemplate(url);
});

// VerifyEmail.tsx (note the TSX extension)
import { renderToString } from "solid-js/web"

export const Email = (props: { url: string }) => {
  return (
    <html>
      <body>
        <h2>Onboarding</h2>
        <p>
          Click <a href={props.url}>here</a> to verify your email.
        </p>
      </body>
    </html>
  )
}

export const getEmailTemplate = (url: string) => renderToString(() => <Email url={url} />)

// sendVerificationEmail.ts
resendClient.emails.send({
  from: 'Onboarding <[email protected]>',
  to: user.email,
  subject: 'Verify your email',
  html: getEmailTemplate(url);
});

I put my component in a separate module within my Elysia BFF layer and imported the

getEmailTemplate

getEmailTemplate

in my module that sends the email. But when I run the code, I get the following error:

ReferenceError: React is not defined
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/Email.tsx:16:71)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:559:34)
      at createRoot (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/dist/server.js:58:14)
      at renderToString (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:557:14)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:53:15)
      at sendVerificationEmail (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:48:37)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/better-auth/dist/api/index.mjs:238:52)

ReferenceError: React is not defined
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/Email.tsx:16:71)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:559:34)
      at createRoot (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/dist/server.js:58:14)
      at renderToString (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/solid-js/web/dist/server.js:557:14)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:53:15)
      at sendVerificationEmail (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/server/lib/auth.ts:48:37)
      at <anonymous> (/Users/dsanchez/Developer/github/dsanchez/template-better-auth-solidjs/node_modules/better-auth/dist/api/index.mjs:238:52)

This is my first time doing something like this and not sure what the proper way to do it is. A few thoughts:

- Why the heck is

React

React

called out when I am using SolidJS? Feels like IDEs assume React too much

renderToString in Elysia BFF Layer

renderToString in Elysia BFF Layer

Similar Threads

Similar Threads

Similar Threads