Forem: Carsten Lebek

Svelte + TailwindCSS: A Winning Combo for Shopify Theme App Extensions

Carsten Lebek — Tue, 12 Sep 2023 10:18:42 +0000

If you're a Shopify developer, you know the drill—creating theme app extensions often involves wrestling with vanilla JavaScript, CSS, and Liquid templates. While these are powerful tools in their own right, the developer experience can sometimes leave much to be desired. Tangled code, cumbersome workflows, and limited modularity can slow down your development process and increase the risk of bugs.

Enter the world of modern front-end frameworks, where Developer Experience (DX) takes center stage. Frameworks like React, Angular, and Vue have shifted the paradigm, but today, I want to introduce you to a tool that's truly a cut above the rest when it comes to Shopify theme extension development: Svelte, combined with the utility-first magic of TailwindCSS.

Why Svelte? Unlike traditional frameworks that run in the browser, Svelte is compiled. This means it converts your components into highly efficient vanilla JavaScript at build time, resulting in smaller bundle sizes. This is especially critical for Shopify stores, where every millisecond of load time can impact customer experience and, ultimately, conversions. With Svelte, you get to enjoy the perks of a modern development framework without bloating your online store.

Building a Shopify Theme App Extension with Svelte and TailwindCSS: A Step-by-Step Tutorial

In this tutorial, we'll walk through the steps to set up a Shopify theme app extension using Svelte and TailwindCSS. By the end, you'll have a fully functional extension that benefits from Svelte's smaller bundle size and the utility-first magic of TailwindCSS. Let's get started!

Step 1: Use the Template Repository
Firstly, navigate to the Svelte App Extension repository by Carsten Lebek. Click on the "Use this template" button to create a new repository based on this template.

Step 2: Clone the Repository
Clone the newly created repository onto your local machine. Open your terminal and execute the following:

git clone <Your-Repository-URL>

Replace with the URL of your new repository.

Step 3: Install Dependencies
Navigate to the directory where you've cloned the repository and run the following command to install all necessary dependencies:

pnpm install

Step 4: Link the App to Shopify
Run the following command to link your local development environment with an existing or a new app in your Shopify Partners Dashboard:

pnpm config:link

Follow the prompts to complete the linking process.

Step 5: Start Development and Install the App
Run the development server using the following command:

pnpm dev

After the development server starts, you'll be prompted with a message. Press 'p' to install the app.

Step 6: Add the Extension to Your Theme
Finally, open your Shopify theme editor and add the new theme app extension section.

What's Next?

You've successfully set up your development environment to build a Shopify theme app extension using Svelte and TailwindCSS. Your project files are located in ./theme-extension.

Inside this directory, you'll find examples on how to make settings available within the Shopify theme editor and how to use those settings within your Svelte components. This empowers you to create highly dynamic and customizable extensions with ease.

Feel free to dive into the code and explore the full potential of Svelte and TailwindCSS in elevating your Shopify theme development experience.

Happy coding! 🚀

Svelte Email - Build and design emails with Svelte

Carsten Lebek — Sat, 04 Feb 2023 15:47:33 +0000

Email is one of the most widely used forms of communication in the modern world, but developing them can be a real pain in the ass. Whether it's formatting issues, limited design options, or simply struggling to come up with compelling content, the process of creating an effective email can be frustrating and time-consuming.

React Email has made the experience a lot better, so I've decided to build something similar for Svelte.

With Svelte Email you can start building, designing and sending emails in your SvelteKit project in literally three easy steps.

Step 1: Installation

Install the package to your existing SvelteKit project:

npm install svelte-email

pnpm add svelte-email

Step 2: Create an email template using Svelte

src/$lib/emails/Hello.svelte

<script>
    import { Button, Hr, Html, Text } from 'svelte-email';

    export let name = 'World';
</script>

<Html lang="en">
    <Text>
        Hello, {name}!
    </Text>
    <Hr />
    <Button href="https://svelte.dev">Visit Svelte</Button>
</Html>

Step 3: Send an email

This example uses Nodemailer to send the email. You can use any other email service provider.

src/routes/emails/hello/+server.js

import { render } from 'svelte-email';
import Hello from '$lib/emails/Hello.svelte';
import nodemailer from 'nodemailer';

const transporter = nodemailer.createTransport({
    host: 'smtp.ethereal.email',
    port: 587,
    secure: false,
    auth: {
        user: 'my_user',
        pass: 'my_password'
    }
});

const emailHtml = render({
    component: Hello,
    props: {
        name: 'Svelte'
    }
});

const options = {
    from: 'you@example.com',
    to: 'user@gmail.com',
    subject: 'hello world',
    html: emailHtml
};

transporter.sendMail(options);

Congratulations 🎉 You have just sent an email from a server route in your SvelteKit project, without ever having to touch the HTML of the email.

Sending emails arguably can't get easier than this.

Check out the docs for Svelte Email and start building emails with ease! Documentation

Credentials Authentication with Database Sessions Using Auth.js, SvelteKit and Prisma

Carsten Lebek — Tue, 31 Jan 2023 08:32:18 +0000

This guide will show you how to get started with implementing credentials authentication using Auth.js, Sveltekit, and Prisma, while utilizing database sessions.

Step 1: Installing Dependencies

First, you'll need to install the necessary packages. In your Sveltekit project, run the following commands:

pnpm i prisma @prisma/client @auth/core @auth/sveltekit bcrypt

Step 2: Create your Prisma Schema

Create a file named schema.prisma and paste the following code:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL") // Only needed when using a cloud provider that doesn't support the creation of new databases, like Heroku. Learn more: https://pris.ly/migrate-shadow
}

generator client {
  provider        = "prisma-client-js"
}

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  username      String?   @unique
  password      String?
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

Step 3: Create the database schema with Prisma Migrate

Run the following command to create the database schema:

npx prisma migrate dev

This will create an SQL migration file and execute it.

Note that you will need to specify your database connection string in the environment variable DATABASE_URL. You can do this by setting it in a .env file at the root of your project.

Step 4: Initialize the Prisma client

Create a file named client.ts in the src/lib/prisma directory and paste the following code:

// src/lib/prisma/client.ts

import {  PrismaClient } from '@prisma/client';

import { NODE_ENV } from '$env/static/private';

declare global {
    // eslint-disable-next-line no-var
    var prisma: PrismaClient | undefined;
}

export const prisma =
    global.prisma ||
    new PrismaClient({
        // * Uncomment this to see the SQL queries in the console
        // log: NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error']
    });

if (NODE_ENV !== 'production') {
    global.prisma = prisma;
}

Step 5: Set up the SvelteKit Server Hooks

In this step, you will create a server hooks file in your SvelteKit project to handle authentication with @auth/sveltekit. You will also import the necessary dependencies such as CredentialsProvider from @auth/core, PrismaAdapter from @next-auth/prisma-adapter, and bcrypt for password encryption.

// src/hooks.server.ts

import { SvelteKitAuth } from '@auth/sveltekit';
import CredentialsProvider from '@auth/core/providers/credentials';
import type { Handle } from '@sveltejs/kit';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import type { Adapter } from '@auth/core/adapters';
import { prisma } from '$lib/prisma/client';
import type { Provider } from '@auth/core/providers';
import { encode, decode } from '@auth/core/jwt';
import bcrypt from 'bcrypt';

export const handle: Handle = async ({ event, resolve }) => {
    const result = await SvelteKitAuth({
        adapter: PrismaAdapter(prisma) as Adapter,
        providers: [
            CredentialsProvider({
                // The name to display on the sign in form (e.g. "Sign in with...")
                name: 'Credentials',
                // `credentials` is used to generate a form on the sign in page.
                // You can specify which fields should be submitted, by adding keys to the `credentials` object.
                // e.g. domain, username, password, 2FA token, etc.
                // You can pass any HTML attribute to the <input> tag through the object.
                credentials: {
                    username: { label: 'Username', type: 'text', placeholder: 'Username' },
                    password: { label: 'Password', type: 'password' }
                },
                async authorize(credentials) {
                    if (!credentials) {
                        return null;
                    }

                    const user = await prisma.user.findUnique({
                        where: {
                            username: credentials.username
                        }
                    });

                    if (!user || !user.password) {
                        return null;
                    }

                    const isPasswordValid = await bcrypt.compare(credentials.password, user.password);

                    if (!isPasswordValid) {
                        return null;
                    }

                    return user;
                }
            })
        ] as Provider[],
        callbacks: {
            async signIn({ user, credentials }) {
                // Check if this sign in callback is being called in the credentials authentication flow.
                // If so, use the next - auth adapter to create a session entry in the database
                // (SignIn is called after authorize so we can safely assume the user is valid and already authenticated).
                if (credentials && credentials.username && credentials.password) {
                    if (user) {
                        const sessionToken = crypto.randomUUID();
                        // Set expiry to 30 days
                        const sessionExpiry = new Date(Date.now() + 60 * 60 * 24 * 30 * 1000);

                        await PrismaAdapter(prisma).createSession({
                            sessionToken: sessionToken,
                            userId: user.id,
                            expires: sessionExpiry
                        });

                        event.cookies.set('next-auth.session-token', sessionToken, {
                            expires: sessionExpiry
                        });
                    }
                }

                return true;
            }
        },
        jwt: {
            // Add a callback to the encode method to return the session token from a cookie
            // when in the credentials provider callback flow.
            encode: async (params) => {
                if (
                    event.url.pathname?.includes('callback') &&
                    event.url.pathname?.includes('credentials') &&
                    event.request.method === 'POST'
                ) {
                    // Get the session token cookie
                    const cookie = event.cookies.get('next-auth.session-token');

                    // Return the cookie value, or an empty string if it is not defined
                    return cookie ?? '';
                }
                // Revert to default behaviour when not in the credentials provider callback flow
                return encode(params);
            },
            decode: async (params) => {
                if (
                    event.url.pathname?.includes('callback') &&
                    event.url.pathname?.includes('credentials') &&
                    event.request.method === 'POST'
                ) {
                    return null;
                }

                // Revert to default behaviour when not in the credentials provider callback flow
                return decode(params);
            }
        },
        session: {
            strategy: 'database',
            maxAge: 60 * 60 * 24 * 30, // 30 days
            updateAge: 60 * 60 * 24, // 24 hours
            generateSessionToken: () => {
                return crypto.randomUUID();
            }
        }
    })({
        event,
        resolve
    });

    return result;
};

Signing up users

Creating a user account is quick and effortless when you use Prisma. With just a few lines of code, you can add new users to your database and get them started in no time. Take a look at the code below:

const user = await prisma.user.create({
    data: {
        username: username,
        password: await bcrypt.hash(password, 10)
    }
});

const account = await prisma.account.create({
    data: {
        userId: user.id,
        type: 'credentials',
        provider: 'credentials',
        providerAccountId: user.id
    }
});