Setting up ZK Email SDK

Prerequisites

Before you begin:

Make sure you have the following tools installed:

Node.js
npm or yarn (package manager)
A Google OAuth Client ID (for Gmail API access)

To obtain a Google OAuth Client ID:

Go to the Google Cloud Console
Create a new project or select an existing one
Enable the Gmail API for your project
Create credentials (OAuth client ID) for a Web application
Note down your Client ID for later use

Project Setup and Installation

Choose your framework below for specific setup and installation instructions.

1. Create a new React project with Vite

For npm users:

npm create vite@latest my-zk-email-app -- --template react-ts

For yarn users:

yarn create vite my-zk-email-app --template react-ts

2. Navigate to the project directory

cd my-zk-email-app

3. Install dependencies

For npm users:

npm install

For yarn users:

yarn

4. Install the ZK Email SDK

For npm users:

npm install @zk-email/zk-email-sdk

For yarn users:

yarn add @zk-email/zk-email-sdk

5. Create an environment file

Create a new file named .env in the root of your project:

touch .env

Add your Google OAuth Client ID to the .env file:

VITE_GOOGLE_OAUTH_CLIENT_ID=your_client_id_here

6. Configuration

Update your src/App.tsx file:

import { ZkEmailSDKProvider } from "@zk-email/zk-email-sdk";

function App() {
  return (
    <ZkEmailSDKProvider 
      clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
      zkEmailSDKRegistryUrl='https://registry-dev.zkregex.com'
    >
      {/* Your app components */}
    </ZkEmailSDKProvider>
  );
}

export default App;

1. Create a new Next.js project

For npm users:

npx create-next-app@latest my-zk-email-app

For yarn users:

yarn create next-app my-zk-email-app

Choose the following options:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes (or No, if you prefer)
Would you like to use src/ directory? › Yes
Would you like to use App Router? › Yes
Would you like to customize the default import alias? › No

2. Navigate to the project directory

cd my-zk-email-app

3. Install the ZK Email SDK

For npm users:

npm install @zk-email/zk-email-sdk

For yarn users:

yarn add @zk-email/zk-email-sdk

4. Create an environment file

Create a new file named .env.local in the root of your project:

touch .env.local

Add your Google OAuth Client ID to the .env.local file:

NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID=your_client_id_here

5. Configuration

Create a new file src/app/providers.tsx:

'use client'

import { ZkEmailSDKProvider } from "@zk-email/zk-email-sdk";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ZkEmailSDKProvider 
      clientId={process.env.NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID}
      zkEmailSDKRegistryUrl='https://registry-dev.zkregex.com'
    >
      {children}
    </ZkEmailSDKProvider>
  );
}

Update your src/app/layout.tsx file:

import { Providers } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

1. Create a new Next.js project

For npm users:

npx create-next-app@latest my-zk-email-app

For yarn users:

yarn create next-app my-zk-email-app

Choose the following options:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes (or No, if you prefer)
Would you like to use src/ directory? › Yes
Would you like to use App Router? › No
Would you like to customize the default import alias? › No

2. Navigate to the project directory

cd my-zk-email-app

3. Install the ZK Email SDK

For npm users:

npm install @zk-email/zk-email-sdk

For yarn users:

yarn add @zk-email/zk-email-sdk

4. Create an environment file

Create a new file named .env.local in the root of your project:

touch .env.local

Add your Google OAuth Client ID to the .env.local file:

NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID=your_client_id_here

5. Configuration

Create or update src/pages/_app.tsx:

import { AppProps } from 'next/app';
import { ZkEmailSDKProvider } from "@zk-email/zk-email-sdk";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ZkEmailSDKProvider 
      clientId={process.env.NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID}
      zkEmailSDKRegistryUrl='https://registry-dev.zkregex.com'
    >
      <Component {...pageProps} />
    </ZkEmailSDKProvider>
  );
}

export default MyApp;

PreviousGetting Started NextCreating a New Pattern

Last updated 1 year ago