fix(jsx-email): allow preview server to serve files outside of worksp…

…ace root (#105) Co-authored-by: Affan Shahid <[email protected]> Co-authored-by: Paul Ehikhuemen <[email protected]> Co-authored-by: Andrew Powell <[email protected]>
shellscape · Dec 26, 2023 · 5747cc4 · 5747cc4
1 parent df9347e
commit 5747cc4
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 10 deletions.
diff --git a/apps/demo/emails/local-assets.tsx b/apps/demo/emails/local-assets.tsx
@@ -0,0 +1,68 @@
+import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from 'jsx-email';
+
+import * as React from 'react';
+
+export const TemplateName = 'local-assets';
+
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif'
+};
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  marginBottom: '64px',
+  padding: '20px 0 48px'
+};
+
+const box = {
+  padding: '0 48px'
+};
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0'
+};
+
+const paragraph = {
+  color: '#777',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const
+};
+
+const anchor: React.CSSProperties = {
+  color: '#3869d4',
+  textDecoration: 'underline'
+};
+
+const baseUrl = import.meta.env.DEV
+  ? import.meta.resolve('./static/')
+  : 'https://assets.example.com/';
+
+export const Template = () => {
+  const catUrl = `${baseUrl}cat.jpeg`;
+  return (
+    <Html>
+      <Head />
+      <Preview>This is our email preview text for </Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={box}>
+            <Img src={catUrl} alt="Cat" width="200" height="200" />
+            <Hr style={hr} />
+            <Text style={paragraph}>
+              URL:
+              <br />
+              <Link style={anchor} href={catUrl}>
+                {catUrl}
+              </Link>
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
diff --git a/apps/demo/emails/static/cat.jpeg b/apps/demo/emails/static/cat.jpeg
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -9,5 +9,8 @@
   },
   "dependencies": {
     "jsx-email": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "20.10.5"
   }
 }
diff --git a/apps/demo/tsconfig.json b/apps/demo/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../shared/tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "types": ["./node_modules/jsx-email/node_modules/vite/client", "./node_modules/@types/node"]
+  }
+}
diff --git a/docs/components/image.md b/docs/components/image.md
@@ -28,6 +28,23 @@ referenced, so avoid using these. See [Can I
 Email](https://www.caniemail.com/features/image-svg/) for more information.
 :::
 
+::: tip
+To use local images during development, you can resolve the path with node.
+Just remember, for production, you'll need to host the images somewhere and
+reference them with a URL.
+
+```jsx
+import { Img } from 'jsx-email';
+
+const baseUrl = import.meta.DEV ? import.meta.resolve('../assets/') : 'https://assets.example.com/';
+
+const Email = () => {
+  return <Img src={`${baseUrl}cat.jpg`} alt="Cat" width="300" height="300" />;
+};
+```
+
+:::
+
 ## Component Props
 
 ```ts

diff --git a/packages/jsx-email/src/cli/commands/preview.ts b/packages/jsx-email/src/cli/commands/preview.ts
@@ -65,8 +65,8 @@ export const start = async (targetPath: string, argv: PreviewOptions) => {
         ...viteConfig.resolve?.alias
       }
     },
-    server: { host, port: parseInt(port as any, 10) }
-  } as InlineConfig;
+    server: { fs: { strict: false }, host, port: parseInt(port.toString(), 10) }
+  } satisfies InlineConfig;
 
   const server = await createServer(mergedConfig);
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml