Using clerk with vite and static site

I want to see if we can use the devdojo tails app to design the site, then drop it into vite to customize some tailwindcss stuff, and add clerk for user authentication.

Lets go!

Create a new vite project

Lets use typescript without anything else.

1
2
  npm create vite@latest my-project -- --template vanilla-ts
  cd my-project

Add tailwindcss

1
2
  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p

Update tailwind.config.js, and for fun we can use one of the Modern Font Stack in the theme.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
  // tailwind.config.js
  
  /** @type {import('tailwindcss').Config} */
  export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
      extend: {
        fontFamily: {
          sans: [
            "Avenir",
            "Montserrat",
            "Corbel",
            "URW Gothic",
            "source-sans-pro",
            "sans-serif",
          ],
        },
      },
    },
    plugins: [],
  };

Update style.css

1
2
3
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Copy our design over into `index.html`

Copy the raw html file over from tails.

Delete the insane style tag that has the entire tailwindcss in there.

At the bottom, put in

1
  <script type="module" src="/src/main.ts"></script>

So vite knows how to build everything.

Get rid of the login buttons, and give that div and id, such as profile:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <div class="flex items-center space-x-8" id="sign-in-container">
      <button
        id="sign-in"
        class="px-4 py-2 font-bold text-white bg-gray-900 rounded-md"
        data-rounded="rounded-md"
        data-primary="gray-900"
      >
        Sign in
      </button>
    </div>
  </div>

Add clerk

Install clerk/javascript.

1
  npm install @clerk/clerk-js

Create a new app in clerk and copy over the VITE_CLERK_PUBLISHABLE_KEY into your .env.local.

Add login to `main.ts`:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  import "./style.css";

  import { Clerk } from "@clerk/clerk-js";

  const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

  const clerk = new Clerk(clerkPubKey);
  
  window.addEventListener("load", async () => {
    await clerk.load();

    const signinbutton = document.getElementById("sign-in");

    if (clerk.user) {
      const userButtonDiv = document.getElementById("sign-in-container");
      signinbutton?.remove();

      if (userButtonDiv) {
        clerk.mountUserButton(userButtonDiv as HTMLDivElement);
      }
    } else {
      const signinbutton = document.getElementById("sign-in");
      signinbutton?.addEventListener("click", () => {
        clerk.openSignIn();
      });
    }
  });

Test the build

Build it and run live-server to see how it works.

1
2
  npm run build
  npx live-server dist/

Using clerk with vite and static site

Maybe we don’t really want all of that nextjs

Contents

Create a new vite project

Add tailwindcss

Copy our design over into `index.html`

Add clerk

Add login to `main.ts`:

Test the build

rust to wasm to javascript

Accessing clerk from ruby

backends dont matter

Contents

Create a new vite project

Add tailwindcss

Copy our design over into index.html

Add clerk

Add login to main.ts:

Test the build

rust to wasm to javascript

Accessing clerk from ruby

backends dont matter

Copy our design over into `index.html`

Add login to `main.ts`: