Code Frontend

Deploy a Remix+Drizzle Shopify App on Cloudflare Pages, D1 & KV

Vincas Stonys — Sun, 31 Dec 2023 16:17:42 GMT

Cloudflare has become my go-to platform for hosting Remix and Next.js apps. It's affordable, offers a generous free tier, and has a strong brand. I use Remix to build a Shopify app, so hosting it on Cloudflare pages seemed like a natural fit.

However, there aren't many examples of how to deploy Shopify apps on Cloudflare, and relevant documentation is scarce, so it took me two days to integrate everything and get the local dev environment working smoothly.

These examples have been invaluable in helping me understand what needed to be done:

Instead of building another template that quickly becomes outdated, I will share my complete setup process step-by-step so you can understand it and adapt it yourself.

Why Use Cloudflare for Shopify Apps?

Cloudflare Pages offer serverless edge runtime, which lets you distribute your backend code close to your users without the initial cold start delay. This lets your app scale cost-efficiently while staying fast.

You will want to use a serverless database when you use edge functions. Otherwise, you're negating any gains from the edge functions. Cloudflare offers an SQLite-based solution for that called D1 Database, which is currently in public beta.

For storing Shopify sessions, we can use Cloudflare Workers KV, a key-value store that caches data on Cloudflare's CDN, ensuring extremely quick reads.

Cloudflare has everything we need to make a Shopify app super fast, and I love that everything is in a single place and uses a single CLI.

Step 0: Create a Partner Account and a Development Store

First, you'll need to sign up for a Shopify partner account if you don't already have one:

Become a Shopify Partner Today - Shopify Partners

Shopify Partners range from global enterprises to startups and entrepreneurs. Increase your earnings, enhance your skills, and expand your network as part of Shopify’s thriving global community of agency, app, consulting, and technology partners.

Shopify

Then, you'll need to create a development store through your partner dashboard:

Click "Create development store"

Just make sure you're creating a test store for an app:

Step 1: Initialize a Shopify App with Remix

To set up the initial code, you must create a Shopify partner account and follow the steps in the Shopify documentation here: https://shopify.dev/docs/apps/getting-started/create.

The CLI may ask you to authenticate first, but in the end, you should end up with your terminal looking like this:

Shopify CLI output

When you run npm run dev for the first time, you will be asked to create a new application and connect it to a development store:

Now quit the development server by pressing q or ctrl+c in your command line. We will customize the build tasks to use Cloudflare's Wrangler for local development.

Step 2: Update Config Files for Cloudflare

We had a choice of using either a Shopify CLI or Remix CLI to bootstrap our application. While the Remix CLI lets you generate the necessary configuration for hosting on Cloudflare, it doesn't bootstrap a Shopify app.

I think adding the Cloudflare configuration on top of a bootstrapped Shopify app is easier, and we can use the documentation and the Remix+Cloudflare Pages template to help us.

Install dependencies and update package.json

First, get the necessary Cloudflare dependencies from npm:

npm i @remix-run/cloudflare @remix-run/cloudflare-pages @shopify/shopify-app-session-storage-kv @remix-run/css-bundle
npm i -D @cloudflare/workers-types wrangler

Then, we need to add these to package.json:

{
  "engines": {
    "node": ">=18.0.0"
  },
  "sideEffects": false,
  "type": "module",
  ... 
 }

These lines are required to run your app on Cloudflare Pages. Additionally, replace the start script with this:

"start": "wrangler pages dev ./public --live-reload --kv=SESSION",

We will be using wrangler pages dev for local development and --kv=SESSION binds the local storage version of Cloudflare KV to the context.env.SESSION environment variable. We will make sure this binding is the same on prod later on.

Finally, feel free to delete predev, setup and prisma scripts, as we will be using Drizzle ORM instead of Prisma.

Update Typescript Configuration

We need to ensure our app is compatible with ESModules. Replace your tsconfig.json content with this code:

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "removeComments": false,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "allowJs": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "target": "ES2022",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "types": ["node", "@shopify/app-bridge-types"]
  }
}

file: ./tsconfig.json

We've changed the module resolution to Bundler instead of Node16, added esModuleInterop and bumped target and lib to ES2022.

We've also included remix.env.d.ts, but we haven't yet created it, so do that now in your root directory:

/// 
/// 
///

file: ./remix.env.d.ts

Extend the Remix server

Create a file called server.ts in your root directory with this code:

import { logDevReady } from "@remix-run/cloudflare";
import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
import * as build from "@remix-run/dev/server-build";

if (process.env.NODE_ENV === "development") {
  logDevReady(build);
}

export const onRequest = createPagesFunctionHandler({
  build,
  getLoadContext: (context) => ({ env: context.env }),
  mode: build.mode,
});

file: ./server.ts

The important bit is the getLoadContext line because it forwards the environment variables to our Remix loaders and actions.

We also need to update remix.config.js with a custom startup command to use wrangler pages dev for local development. Replace its contents with this:

import fs from "node:fs";

// Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176
// Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the remix server. The CLI will eventually
// stop passing in HOST, so we can remove this workaround after the next major release.
if (
  process.env.HOST &&
  (!process.env.SHOPIFY_APP_URL ||
    process.env.SHOPIFY_APP_URL === process.env.HOST)
) {
  process.env.SHOPIFY_APP_URL = process.env.HOST;
  delete process.env.HOST;
}

// Binds env vars for local development with Cloudflare pages
if (process.env.NODE_ENV === "development") {
  fs.writeFileSync(
    ".dev.vars",
    `SHOPIFY_APP_URL=${process.env.SHOPIFY_APP_URL}\nSHOPIFY_API_KEY=${process.env.SHOPIFY_API_KEY}\nSHOPIFY_API_SECRET=${process.env.SHOPIFY_API_SECRET}\nSCOPES=${process.env.SCOPES}\n`,
  );
}

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  server: "./server.ts",
  appDirectory: "app",
  serverBuildPath: "functions/[[path]].js",
  serverConditions: ["workerd", "worker", "browser"],
  serverDependenciesToBundle: "all",
  serverMainFields: ["browser", "module", "main"],
  serverMinify: true,
  serverModuleFormat: "esm",
  serverPlatform: "neutral",
  dev: {
    command: `npm start -- --port=${process.env.PORT}`,
    manual: true,
    port: process.env.HMR_SERVER_PORT || 8002,
  },
  future: {},
};

file: ./remix.config.js

A lot of the configuration settings come from the Cloudflare+Remix template: https://github.com/remix-run/remix/blob/main/templates/cloudflare-pages/remix.config.js. However, I've added a few important bits.

👍

Feel free to skip the explanation below if you're just copy-pasting.

The shopify app dev command opens a tunnel to your local server, updates the app URL in your partner dashboard, and sets the new URL along with the API key, secret, and scope as environment variables.

The problem is that Cloudflare workers don't receive environment variables - they must be bound. This is done by adding them to .dev.vars file, and that's what the fs.writeFileSync line does - it writes the latest env variable values to the .dev.vars file every time the server is started.

Additionally, I've updated the command used by remix dev to call our npm start which uses Wrangler to start the local Cloudflare development environment on the port the Cloudflare tunnel expects.

Finally, because we use the ESModules, we need to change the syntax of the default export.

With this configuration, you will be able to start your server, and you'll see that it's using wrangler under the hood and it's being passed our environment variables as bindings:

Make sure to set URLs to update automatically.

Don't worry if you're getting errors when starting your app. We still need to take care of the Shopify part, but this configuration will enable us to deploy and run our project on Cloudflare.

Step 3: Update Shopify Setup for Cloudflare

We don't have access to process.env anymore, but our Shopify configuration relies on it. We need to change that, so let's update the shopify.server.ts with this content:

import type { AppLoadContext } from "@remix-run/cloudflare";
import { restResources } from "@shopify/shopify-api/rest/admin/2023-10";
import {
  AppDistribution,
  DeliveryMethod,
  LATEST_API_VERSION,
  shopifyApp,
} from "@shopify/shopify-app-remix/server";
import { KVSessionStorage } from "@shopify/shopify-app-session-storage-kv";

declare module "@remix-run/cloudflare" {
  interface AppLoadContext {
    env: {
      SHOPIFY_API_KEY: string;
      SHOPIFY_API_SECRET: string;
      SHOPIFY_APP_URL: string;
      SCOPES: string;
      SHOP_CUSTOM_DOMAIN: string;
      SESSION: KVNamespace;
      DB: D1Database;
    };
  }
}

export const initShopify = (context: AppLoadContext) => {
  const shopify = shopifyApp({
    apiKey: context.env.SHOPIFY_API_KEY,
    apiSecretKey: context.env.SHOPIFY_API_SECRET || "",
    apiVersion: LATEST_API_VERSION,
    scopes: context.env.SCOPES?.split(","),
    appUrl: context.env.SHOPIFY_APP_URL || "",
    authPathPrefix: "/auth",
    sessionStorage: new KVSessionStorage(context.env.SESSION),
    distribution: AppDistribution.AppStore,
    restResources,
    webhooks: {
      APP_UNINSTALLED: {
        deliveryMethod: DeliveryMethod.Http,
        callbackUrl: "/webhooks",
      },
    },
    hooks: {
      afterAuth: async ({ session }) => {
        shopify.registerWebhooks({ session });
      },
    },
    future: {
      v3_webhookAdminContext: true,
      v3_authenticatePublic: true,
    },
    ...(context.env.SHOP_CUSTOM_DOMAIN
      ? { customShopDomains: [context.env.SHOP_CUSTOM_DOMAIN] }
      : {}),
  });

  return shopify;
};

file: ./app/shopify.server.ts

We wrap our Shopify object in a function that receives a context with all our environment variables. We'll be calling this function from our loaders and actions.

Additionally, I've replaced the sessionStorage with KVSessionStorage and pass it the bound id of the key-value store namespace. The declare module "@remix-run/cloudflare" section helps us eliminate warnings due to the default context type being unknown.

Update the usages of Shopify

Now that we changed the shopify.server.ts file, any existing usages will break and need to be updated. Below are all of the changes you need to make.

In `app/entry.server.tsx`

Replace the contents with:

import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToReadableStream } from "react-dom/server";
import { initShopify } from "~/shopify.server";

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  context: AppLoadContext,
) {
  const shopify = await initShopify(context);
  shopify.addDocumentResponseHeaders(request, responseHeaders);

  const body = await renderToReadableStream(
    ,
    {
      signal: request.signal,
      onError(error: unknown) {
        // Log streaming rendering errors from inside the shell
        console.error(error);
        responseStatusCode = 500;
      },
    },
  );
  if (isbot(request.headers.get("user-agent"))) {
    await body.allReady;
  }

  responseHeaders.set("Content-Type", "text/html");
  return new Response(body, {
    headers: responseHeaders,
    status: responseStatusCode,
  });
}

file: ./app/entry.server.tsx

It's mostly the same as in Remix+Cloudflare template, but I've updated the handleRequest to accept context as the last argument and pass it to initShopify.

In `app/root.tsx`

Add the code necessary for css bundling:

import type { LinksFunction } from "@remix-run/cloudflare";
import { cssBundleHref } from "@remix-run/css-bundle";

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

...

file: ./app/root.tsx

In `app/routes/*`

We'll follow this pattern to fix most of the issues in routes:

Get the authenticate method off of the Shopify object created with our new function.
Change the node imports to cloudflare imports.

Do that in app/routes/auth.$.tsx:

import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
import { initShopify } from "../shopify.server";

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  await initShopify(context).authenticate.admin(request);

  return null;
};

file: ./app/routes/auth.$.tsx

Do the same as above in app/routes/webhooks.tsx, but additionally remove the usage of db and instead remove session directly through shopify, or simply replace the contents with this:

import type { ActionFunctionArgs } from "@remix-run/cloudflare";
import { initShopify } from "../shopify.server";

export const action = async ({ request, context }: ActionFunctionArgs) => {
  const shopify = initShopify(context);
  const { topic, session, admin } = await shopify.authenticate.webhook(request);

  if (!admin) {
    // The admin context isn't returned if the webhook fired after a shop was uninstalled.
    throw new Response();
  }

  switch (topic) {
    case "APP_UNINSTALLED":
      if (session) {
        await shopify.sessionStorage.deleteSession(session.id);
      }

      break;
    case "CUSTOMERS_DATA_REQUEST":
    case "CUSTOMERS_REDACT":
    case "SHOP_REDACT":
    default:
      throw new Response("Unhandled webhook topic", { status: 404 });
  }

  throw new Response();
};

file: ./app/routes/webhooks.tsx

Do similar changes in app/routes/app.tsx to fix the loader, making sure to change process.env to context.env:

import type {
  HeadersFunction,
  LoaderFunctionArgs,
} from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { initShopify } from "../shopify.server";

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  await initShopify(context).authenticate.admin(request);

  return json({ apiKey: context.env.SHOPIFY_API_KEY || "" });
};

...

file: ./app/routes/app.tsx

And similarly in app/routes/app._index.tsx to fix the loader and the action:

import type {
  ActionFunctionArgs,
  LoaderFunctionArgs,
} from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { initShopify } from "../shopify.server";

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  await initShopify(context).authenticate.admin(request);

  return null;
};

export const action = async ({ request, context }: ActionFunctionArgs) => {
  const { admin } = await initShopify(context).authenticate.admin(request);
  ...
}

file: /app/routes/app._index.tsx

💭

If responseJson is giving you type errors, just set it to any:
const responseJson = await response.json();

Finally, fix the login by taking it from the result of initShopify and replacing node imports with cloudflare in app/routes/_index/route.tsx and app/routes/auth.login/route.tsx:

import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
import { json, redirect } from "@remix-run/cloudflare";
import { initShopify } from "~/shopify.server";

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  ...
  const shopify = initShopify(context);
  return json({ showForm: Boolean(shopify.login) });
};

file: ./app/routes/_index/route.tsx

import type {
  ActionFunctionArgs,
  LoaderFunctionArgs,
} from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { initShopify } from "~/shopify.server";

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  const errors = loginErrorMessage(await initShopify(context).login(request));
  ...
};

export const action = async ({ request, context }: ActionFunctionArgs) => {
  const errors = loginErrorMessage(await initShopify(context).login(request));
  ...
};

file: ./app/routes/auth.login/route.tsx

Now, if you run npm run dev you should be able to visit the given preview URL, install your app, and see your app working:

Working Shopify demo app

Step 4: Using Drizzle with D1

First, we need to create a new D1 database using instructions in cloudflare docs:

npx wrangler d1 create dev-remix-cf-demo

Command to run, I suggest prefixing your database with dev or prod

Wrangler CLI output

The CLI gives us credentials to use to connect to the database. We need to create a wrangler.toml config file in our root directory and paste them there (replace with your values):

compatibility_date = "2022-11-07"

[[d1_databases]]
binding = "DB"
database_name = "dev-remix-cf-demo"
database_id = "53df5d71-de80-4391-a75f-081ae2058028"
preview_database_id = "DB"

file: ./wrangler.toml

I've added two extra lines, compatibility_date so we don't need to pass it as CLI arguments and preview_database_id which must match our binding so that D1 works with the local version of Cloudflare Pages.

💭

When developing locally, the local DB will be a copy of your remote database, but modifying it won't change the remote version unless you explicitly pass --remote to your wrangler command. More info here: https://developers.cloudflare.com/d1/learning/local-development/

Add Drizzle ORM

We'll loosely follow instructions in drizzle docs. First, let's install the necessary packages:

npm i drizzle-orm
npm i -D drizzle-kit

Then, let's create a new folder drizzle in the root directory and create schema.ts file inside with some tables to test our setup with:

import { sqliteTable, text } from "drizzle-orm/sqlite-core";

export const test_table = sqliteTable("test_table", {
  test_data: text("test_data").notNull(),
});

file: ./drizzle/schema.ts

And we also need to create a config file for drizzle called drizzle.config.ts:

import type { Config } from "drizzle-kit";

export default {
  driver: "d1",
  schema: "./drizzle/schema.ts",
  out: "./drizzle/migrations",
} satisfies Config;

file: ./drizzle.config.ts

Finally, we need to create a way to access the database from our app, so let's modify the app/db.server.ts file:

import type { AppLoadContext } from "@remix-run/cloudflare";
import { drizzle } from "drizzle-orm/d1";

export function initDB(context: AppLoadContext) {
  return drizzle(context.env.DB);
}

export * as schema from "../drizzle/schema";

file: ./app/db.server.ts

You'll notice that we use the same approach to get binding as we did with initShopify. I also like to re-export schema from this file so it's easier to access it in the app.

Using drizzle in the app

We can now test our setup by writing and reading some test data.

In app/routes/app._index.tsx let's insert some test data in the action and read it in the loader:

import { initDB, schema } from "~/db.server";

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  await initShopify(context).authenticate.admin(request);

  const test_data = await initDB(context)
    .select()
    .from(schema.test_table)
    .all();

  return json({ test_data });
};

export const action = async ({ request, context }: ActionFunctionArgs) => {
  const { admin } = await initShopify(context).authenticate.admin(request);
  await initDB(context)
    .insert(schema.test_table)
    .values({ test_data: "testing" });
  ...
}

file: ./app/routes/app._index.tsx

Let's output the test data somewhere we can see. Get the loader data at the top of the Index component and output the test_data somewhere on the page:

export default function Index() {
  const { test_data } = useLoaderData();
  
  ...
  
  return (
    ...
    
      Congrats on creating a new Shopify app 🎉
    
    {JSON.stringify(test_data)}
    ...
  );
}

file: ./app/routes/app._index.tsx

Before we test the app, we need to create the tables in the database. First, let's create the initial migration:

npx drizzle-kit generate:sqlite

CLI output

Note the migration name, and run the command to update the wrangler database:

npx wrangler d1 execute dev-remix-cf-demo --local --file=./drizzle/migrations/0000_classy_kronos.sql

CLI output

💭

Unfortunately, the CLI doesn't allow executing multiple migrations at once, so when you have multiple migration files, you still need to execute them one by one. You can write a small script to do that if it becomes bothersome.

Finally, let's run npm run dev to see our local database in action by clicking "Generate product."

💭

If you're getting errors regarding scope when you press the "Generate product" button, make sure in your shopify.app.toml the scopes are set to: scopes = "write_products". Afterwards run npm run shopify app config push.

You should see new values appearing, and they'll still be available locally if you restart your application:

Step 5: Deploying Your Shopify App

We got the local dev environment working, but we still need to deploy the production application. This will involve deploying the database, configuring the KV store, and deploying the application itself.

Deploying the D1 database

Even though we created tables and some data locally, the remote D1 database still has no tables or data. To initialize them, we need to run the migrations without the --local flag:

npx wrangler d1 execute dev-remix-cf-demo --file=./drizzle/migrations/0000_classy_kronos.sql

CLI output for production database

If you visit your Cloudflare dashboard you should see the new tables appear:

Workers & Pages -> D1 -> [your database name]

Deploying the application

Go to Workers & Pages -> Overview and click "Create application" then go to "Pages" tab.

The simplest way from here is to push your application to a new GitHub repository and then "Connect to Git" in the Cloudflare dashboard. Everything will be taken care of automatically.

Application overview dashboard

Alternatively, we can deploy through Wrangler CLI by pushing our static build files. To do that, create a new Cloudflare project first:

npx wrangler pages project create

Then, we can use wrangler pages deploy to push our static files. It is helpful to create a script in package.json for this:

"pages:deploy": "npm run build && wrangler pages deploy ./public",

Will create a production deployment

Running the command will create a new project in the Cloudflare dashboard:

Note the application URL. We will need to set it in our environment variables.

Configure KV store and D1 bindings

Go to "Workers & Pages" -> "KV" and "Create a namespace" with a name you'll easily identify:

View after creating a new KV namespace

Now go to "Overview," select your app, and go to "Settings" -> "Functions." Scroll down to "KV namespace bindings" and set SESSION to the new namespace. It will be available on context.env.SESSION just like in the development environment:

Further down below, bind your D1 database to DB variable:

Bind Shopify environment variables

As the last bit of configuration in Cloudflare, we need to add Shopify env var bindings to our pages workers.

Go to your app's "Settings" -> "Environment variables" and for production environment set the variables as they are defined in .dev.vars file or run npx shopify app env show to see them in console. As SHOPIFY_APP_URL set the URL from above, with https:// prefix:

SHOPIFY_APP_URL=https://remix-cf-demo-app.pages.dev
SHOPIFY_API_KEY=abcd12345...
SHOPIFY_API_SECRET=abcd12345...
SCOPES=write_products

You will have different values

This is what your settings should look like.

💭

If you want to have preview environments, I suggest you create separate Shopify apps just for testing and deploy them separately as if they were production applications, either on separate Cloudflare projects or as your preview deployments here (may be harder to achieve that if you're deploying directly from GitHub though).

Change app URLs in Shopify partner dashboard

Finally, we need to update our app settings in the partner dashboard. Change the app URL and callback URLs to use the new Cloudflare pages URL:

App settings at Shopify partners dashboard

If we re-deploy the application by running npm run pages:deploy we should be able to see the production version of our application.

In your dashboard's overview page click on "Select store" which will let you install the production app on your development store:

And if we test it in our development store, you'll see the requests going to the production URLs:

We can also verify that the production database is being used in our Cloudflare dashboard's D1 section:

Rows are being updated with test data

Final cleanup

Now that we're not using prisma anymore, we can uninstall the related packages and remove prisma directory.

We won't be deploying containers, so we can remove docker files.

Also, because we're changing the .dev.vars file automatically, we can add it to .gitignore and ignore our new build paths:

node_modules

/.cache
/functions/\[\[path\]\].js
/functions/\[\[path\]\].js.map
/functions/metafile.*
/functions/version.txt
/public/build
.dev.vars

file: ./.gitignore

Template Repository

Setting up Shopify app development is tricky without instructions. This article should help. I've also created a repository for the template with all of the code from the article here: https://github.com/vincaslt/remix-cf-pages-d1-drizzle-shopify-app

Copy To Clipboard In JavaScript and React

Vincas Stonys — Mon, 03 Apr 2023 08:21:39 GMT

Copy to Clipboard in JavaScript

To copy text into the clipboard using JavaScript, you can use the Clipboard API:

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    /* ✅ Copied successfully */
  } catch (e) {
    /* ❌ Failed to copy (insufficient permissions) */
  }
}

Copy to clipboard example in JavaScript.

The navigator.clipboard.writeText function accepts the text to copy, and returns a Promise:

resolved - if the text was copied successfully,
rejected - if the user hasn't given the "clipboard-write" permission.

Using Clipboard API in React

You can use the above JavaScript code to implement copying to the clipboard in React, but it's helpful to create a custom hook:

function useCopyToClipboard() {
  const [result, setResult] = useState<
    null | { state: 'success' } | { state: 'error'; message: string }
  >(null);

  const copy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setResult({ state: 'success' });
    } catch (e) {
      setResult({ state: 'error', message: e.message });
      throw e;
    } finally {
      // 👇 Show the result feedback for 2 seconds
      setTimeout(() => {
        setResult(null);
      }, 2000);
    }
  };

  // 👇 We want the result as a tuple
  return [copy, result] as const;
}

A custom ReactJS hook to copy text to the clipboard in TypeScript.

The hook returns a tuple with the function to copy text into the clipboard and an object describing the result:

null - no text copied recently;
"success" - text copied successfully;
"error" - operation failed with the error message.

You can use the useCopyToClipboard hook like this:

export function Example() {
  const [inputText, setInputText] = useState('');
  
  // 👇 Using our custom hook
  const [copyToClipboard, copyResult] = useCopyToClipboard();

  const handleChangeInput = (e: React.ChangeEvent) => {
    setInputText(e.target.value);
  };

  const handleClickCopy = () => {
    // Copy the text from the input field into the clipboard
    copyToClipboard(inputText);
  };

  return (
    
      
      
      
      	// 👇 Showing the results in the UI (for 2 seconds)
        {copyResult?.state === 'success' && 'Copied successfully!'}
        {copyResult?.state === 'error' && `Error: ${copyResult.message}`}
      
    
  );
}

Example usage of the custom useCopyToClipboard hook.

The copy operation has no inherent feedback in the UI, so it's a good idea to provide it yourself, you can do that by checking the copyResult value.

Here's what it looks like:

Demo using the custom useCopyToClipboard React hook.

Copy to clipboard button in React

You can also create a CopyToClipboard button component in React that accepts a text prop and handles showing the feedback messages in the UI. Here's an example that uses react-hot-toast:

import toast from 'react-hot-toast';

type Props = React.HTMLAttributes & {
  text: string;
};

function CopyToClipboard({ text, children = 'Copy', ...rest }: Props) {
  const handleClickCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      // 👇 Using react-hot-toast to provide feedback
      toast.success('Copied!');
    } catch (e) {
      toast.error(`Error: ${e.message}`);
      throw e;
    }
  };

  return (
    
  );
}

Example copy to clipboard button component in React and TypeScript.

Feel free to use the native alert function instead of the toast messages. In that case, replace the toast calls with alert('your message'). However, if you use react-hot-toast you also need to add the Toaster component. Here's an example:

export function Example() {
  const [inputText, setInputText] = React.useState('');

  const handleChangeInput = (e: React.ChangeEvent) => {
    setInputText(e.target.value);
  };

  return (
    
      {/* 👇 Don't forget to add this */}
      
      
      
    
  );
}

Example using the CopyToClipboard button.

Here's what it looks like now:

Demo of the CopyToClipboard button.

Conclusion

The simplest way to copy text to the clipboard in JavaScript is by using the Clipboard API. It has good support in modern browsers and it's easy to use.

However, in case you need to support older browsers you can use the copy-to-clipboard npm package, which falls back on using execCommand in case the browser doesn't have access to navigator.clipboard object.

Read about how to get values from the input fields in React next:

How to Get the Value From Input Field in React

The answer to the first question beginners have - how to get a value from an input element.

Code FrontendVincas Stonys

Want to Build a Shopify App? Here’s What You Should Know

Vincas Stonys — Sun, 19 Mar 2023 15:03:02 GMT

Recently I decided I wanted to build a plugin or an app for an existing platform. I'd been using Shopify for over a year already, so it was a no-brainer which platform it should be.

I'd never built a Shopify app before, but now that I've left my job and have more time, I spent a week building a small Shopify app and released it on the App Store. Mainly, I just wanted to see what it would take.

I'm going to share my whole experience, but here's what you can expect:

Everything that I've learned building the app;
What it took to get it reviewed and published on the App Store;
Pros and cons as I see them;
My resources and recommendations.

If you're at least somewhat interested in building Shopify apps - this article is a must-read.

What was the app?

Over the last year, I was running a tea shop on Shopify and a tea blog on WordPress. I wanted to show a section on my shop's homepage with the latest blog posts.

Unfortunately, there was no good way to do that out of the box. The only app that solved this charged $5/month that I didn't want to pay, and wasn't exactly what I wanted anyway.

So I decided to build an app to pull the latest WordPress posts and integrate them with the Shopify theme editor.

The section I added to my store using the app I've built.

If you're interested in checking it out on the app store, here it is 👇

VistonWP ‑ WordPress Feed - Show a feed of the latest posts from your WordPress... | Shopify App Store

Shopify App Store

Now let's dive into how I built it.

Setting up the app

I followed the official "getting started" guide to bootstrap an example JavaScript application with Shopify CLI. It was just a matter of running:

npm init @shopify/app@latest

For local development, you need to set up ngrok and then Shopify CLI automatically updates the URLs in the app settings that are used to install the app into your store.

🤷‍♂️

It seems to me that production and development URLs are being shared, so it isn't clear to me if booting up a development server would mess something up on production.

What you end up with is a demo app that populates products and shows how many there are. It includes authentication, a basic backend server, and an embedded React app that uses their UI library Polaris.

The demo app (from Shopify docs).

I didn't need to do any wiring up myself, but I deleted whatever files and code from the demo app I didn't need.

Adding theme extensions

What didn't come with the demo was the theme extensions.

There are two kinds of theme extensions - app blocks and app embed blocks:

App embed blocks are scripts that are global for the whole page, such as overlays or code snippets for analytics.

App blocks are page sections that shop owners can add through the theme editor.

I wanted to create an app block merchants could use to add a section with the latest articles. If you're not familiar with Shopify's theme editor, here's what I'm talking about:

App blocks in the theme editor.

Each app block can define settings that alter the appearance, and even behavior of the app:

Settings for the Shopify theme sections and App Blocks. These are the ones for my app.

I created a new theme extension by following the docs and running a CLI command:

npm run shopify app generate extension

📌

It took me some time to realize, but theme extensions aren't exactly part of your app. You must host the Shopify app yourself, but Shopify hosts your theme extensions on their CDN separately.

Once you start your app in development by running npm run dev you'll get a link to the extension settings where you'll need to create a new version. It will be a draft at first, but you can later publish it.

In the same window, you need to enable development store previews:

🤦‍♂️

Initially, I thought I needed to create a draft every time I change something but turns out the extensions are hot-reloaded. Sometimes you might need to manually refresh the page or restart the server, though.

Liquid templates

I wasn't familiar with liquid - the templating language from Shopify, but it was very easy to pick up and I didn't need to do anything fancy anyway. I created a new file blocks/wp-feed.liquid to start with.

Theme extensions must define a schema and some markup, like this:


  My app section contents.


{% schema %}
{
  "name": "Wordpress Feed",
  "target": "section",
  "stylesheet": "wp-feed.css",
  "javascript": "wp-feed.js",
  "settings": [
    { "label": "Section heading", "id": "heading", "type": "text" },
    { "label": "Show section heading", "id": "show_heading", "type": "checkbox", "default": true },
    {
      "type": "range",
      "id": "num_excerpt_lines",
      "min": 1,
      "max": 6,
      "step": 1,
      "label": "Max excerpt lines",
      "default": 3
    },
    {
      "label": "Blog URL",
      "id": "url",
      "type": "url",
      "info": "Overrides the global URL setting for this feed only."
    },
  ]
}
{% endschema %}

Example schema based on my app.

The schema defines:

The app name to show in the editor,
The target which is always section for app blocks,
The settings to show in the theme editor,
Links to your JavaScript and CSS files.

Here's an example of how I used the settings in my templates:


  {% if block.settings.show_heading %}
    
      
        {{ block.settings.heading }}
      
    
  {% endif %}

  
    {% # injected: dynamically generated articles %}
  


{% # ...schema... %}

The markup of my app block using settings from schema.

📌

The templates are server-side rendered, meaning they're generated once when the site is loaded. The theme editor reloads the page every time a setting is changed.

Now I had to fetch the WordPress articles to create a feed.

Fetching WordPress posts

WordPress has a headless API that you can access. Basically, you can issue a GET request to /wp-json on any WordPress blog, slap on some filters, and it will return a JSON response with posts.

In my case, it was similar to this one:

/wp-json/wp/v2/posts?_embed&_fields=title,link,excerpt,featured_media,_embedded,_links&order=desc&per_page=3

Now I needed to figure out how to call this API from my app block.

First, I created a new file assets/wp-feed.js. Remember the line "javascript": "wp-feed.js" in the schema? This is the file.

Now there's a small problem...

Accessing settings in JavaScript files

Shopify will host your assets on its CDN and will add a single

For more information, I suggest you read the google docs: https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data

4) Add Sitemap and Robots.txt

These files help google crawl your site more easily.

The sitemap lets Google know how to prioritize your links and Robots.txt allows you to block Google from visiting and indexing unimportant resources.

📣

Both sitemap and robots.txt file should be hosted at the root level of your domain, e.g. https://codefrontend.com/sitemap.xml and https://codefrontend.com/robots.txt.

Robots.txt

Here's what the Robots.txt file looks like for this blog:

User-agent: *
Sitemap: https://codefrontend.com/sitemap.xml
Disallow: /ghost/
Disallow: /p/
Disallow: /email/
Disallow: /r/

Robots.txt for codefrontend.com

I don't want Google snooping around the admin panel of my blog, which is what the Robots.txt prevents with the Disallow rules. Available options are covered in Google docs:

Create and submit a robots.txt file | Google Search Central | Documentation | Google Developers

A robots.txt file lives at the root of your site. Learn how to create a robots.txt file, see examples, and explore robots.txt rules.

Google Developers

Sitemap

The simplest version of a sitemap is just a text file with available URLs:

https://www.example.com/file1.html
https://www.example.com/file2.html

However, it's more common to use an XML version, because it allows adding some metadata, like lastmod - date of the last update, which is useful for blogs.

You can build the sitemap manually or generate it at https://www.xml-sitemaps.com. For a truly dynamic sitemap, you might need to create a server endpoint that generates it or generate it at build time.

Read more about sitemaps in Google docs: https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap

5) Ensure Great Performance

Google prefers websites with good loading speed and user experience.

Run an audit at https://web.dev/measure/ which will tell you what you should improve. Page load time is the most important factor to consider.

Lighthouse metrics for codefrontend.com

Here are some performance improvements you can do as a React developer:

Code-splitting can improve initial page load times.
Optimize images at build-time and lazy-load them at run-time.
Use defer and async attributes for non-critical scripts.
Pre-render your React code on the server.
Google seems to like AMP.

A lot of these performance optimizations are handled out of the box if you're using a React framework like NextJS.

6) Server-Side Render

Single-page applications are notoriously bad for SEO because they send a blank HTML page initially and generate it on the browser using JavaScript.


  
    React App

What the HTML code for React app usually looks like before scripts are run.

Google needs to wait for the scripts to run before it can parse content. Needless to say - it's not perfect at it.

For many apps, this doesn't matter, but for content-heavy websites, you should pre-render your React code on the server, and then hydrate it on the client. It's tricky to implement on your own, and that's what frameworks like NextJS, Remix, or Astro can help you with.

7) Ensure Correct File Formats

Large images are often the main reason your website loads slowly.

PNG images are very large, often more than 10x larger than web-optimized formats such as JPEG or WEBP with no perceived difference. SVG images usually contain metadata that can be safely removed to significantly reduce the image size.

You can manually compress your images at convertio.co/png-jpg/ or configure your bundler to do that for you. NextJS even has a custom Image component that you should use.

Using SVGs

How images are used is also important.

For instance, you can add SVGs directly in your JSX, but that can significantly hurt page load times and performance because SVGs would be bundled together with your JavaScript code and can't be loaded asynchronously.

You should always prefer the tag for images.

Responsive images

A great way to make sure images aren't slowing down your website is to use different image sizes for different screen sizes. For instance, you don't need a highly detailed image on mobile screens.

Normally, the src attribute on the tag only allows a single resource, but you can provide srcset and sizes attributes to change the source based on the screen size.

Example code for responsive images.

A detailed article on how responsive images work can be found here 👇

Responsive images - Learn web development | MDN

That’s a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we’ve been discussing here:

MDN Web Docs.logo-m{fill:var(--text-link)}

8) Minify Your Code

Minification significantly reduces the size of your code by removing spaces and replacing names with shorter alternatives. If you're using modern build tools like Vite, Parcel, or a framework like NextJS, this will be taken care of automatically.

📣

Don't forget to build your code for production.

In case you're maintaining your own Webpack configs or using plain JavaScript source files - make sure you minify your code.

9) Ensure Good Accessibility

When you make your website accessible for mobile devices and screen readers, you naturally make it easier for Google to crawl and understand your content as well.

Accessibility is often invisible, it's things like:

alt attribute on tags.
aria-label attribute for image-only buttons.
role for clickable non-button elements.
link tags instead of calls to history.push() for navigation.

Here's more about accessibility in React docs 👇

Accessibility – React

A JavaScript library for building user interfaces

React

10) Ensure Good Content Structure

Using semantic tags and good content hierarchy will make it easier for Google to understand the meaning of your content. It can then display it as a list or FAQ, further improving your page ranking.

📣

A common beginner mistake is overusing

tags and underutilizing semantic tags like

, and others.

Here are some tips:

use HTML tags that make the most sense for your content;
use heading tags in hierarchical order,
then
, but not
then
.

11) Ensure Good URL Structure

Google likes short, clear, but descriptive URLs that make sense based on your content.

Make sure your pages are linked together in a logical, hierarchical way. If it makes sense for people, Google will like it as well.

Make sure that:

your URLs aren't too long;
all duplicate pages have canonical links;
every page can be accessed from the root URL;
your URLs follow a tree-like hierarchy;
the URLs include the main keywords based on the content.

Do not underestimate the importance of good URL structure. It can be the difference between getting #1 on Google or not even appearing on the 1st page of search results.

12) Use HTTPS

I can't help but be surprised how some websites in 2023 aren't using HTTPS. There is no reason not to - it's simple and free to do.

Any website, especially those that require login credentials, should use HTTPS - Cloudflare

The apps we build with React usually include gathering data from our users, so HTTPS is a no-brainer. Besides, Google will deprioritize your website if it's unsecured.

I use Cloudflare to get a certificate, manage my DNS records, and caching - all things beneficial for good SEO. I recommend you do the same.

Conclusion

As web developers, we need to know a lot more than just coding, and technical SEO is one of those things.

Fortunately, it's just a bunch of boring optimizations, but they boost your website performance significantly, resulting in better user experience and Google rankings.

Reference this 12-step checklist before launching a new website and you'll have taken care of the most common issues. Download the slides as a PDF here 👇

Technical SEO Checklist For Developers

The 12 things to take care of before launching a website.

Technical SEO Checklist For Developers.pdf

2 MB

Let me know your SEO tips that could be helpful for React developers in the comments.

How to Get the Value From Input Field in React

Vincas Stonys — Wed, 08 Feb 2023 12:32:20 GMT

Usually the first thing a real-world app needs is a way to get user's input. This is commonly done using the HTML element. But a beginner React developer may struggle to get the value of an input field. Here's how to do it:

import { ChangeEvent, useState } from "react";

function Example() {
  const [inputText, setInputText] = useState("");

  const handleChange = (e: ChangeEvent) => {
    // 👇 Store the input value to local state
    setInputText(e.target.value);
  };

  return (
    
      

      {/* 👇 Use the input value from state */}
      Your input: {inputText}
    
  );
};

Get the value of an input in React.

Create a state variable where you will store the input value.
Create a change handler function and set the input value in state with e.target.value
Assign the change handler to the onChange prop on the input.
Pass the input value as the value prop to the input, or its value won't update.

Conclusion

This method of event handlers updating the parent component's state and the child elements using getting it as props is an example of React's uni-directional flow.

📌

Note: the input value will be string even for inputs with type="number" so you may need to convert them to their respective types with Number(e.target.value).

How to Use Resize Observer in React

Vincas Stonys — Wed, 08 Feb 2023 12:07:37 GMT

Using the Resize Observer in Javascript

Unlike window, DOM elements don't have a resize event that you can attach an event listener on. To listen to resize events on a DOM element you need to use the ResizeObserver API:

const myElement = document.querySelector('.myElement');

// 👇 Callback runs when any of the observed elements is resized
const resizeObserver = new ResizeObserver((entries) => {
  // You can iterate all of the element entries observed
  for (const entry of entries) {
    // Do something on resize, access the element on `entry.target`
  }
});

// 👇 Listen to resize events on the element with `myElement` class
resizeObserver.observe(myElement);

// Unobeserve the element to stop tracking its size
resizeObserver.unobserve(myElement);

// Or stop observing all elements
resizeObserve.disconnect();

Creating a resize observer in JavaScript.

Create the resize observer with new ResizeObserver(...).
Pass in the callback function to run when the observer elements are resized.
Start tracking the element's size with the .observe(element) function.

Using the Resize Observer in React

The most common way to use resize observer in react is by using useEffect to start tracking an element's size when the component is mounted. Here's how to do it:

function MyComponent() {
  const elementRef = useRef(null)

  // Start observing the element when the component is mounted
  useEffect(() => {
    const element = elementRef?.current;

    if (!element) return;

    const observer = new ResizeObserver(() => {
      // 👉 Do something when the element is resized
    });

    observer.observe(element);
    return () => {
      // Cleanup the observer by unobserving all elements
      observer.disconnect();
    };
  }, [])

  // 👇 Assign the ref to the element you're observing
  return ...
}

Basic ResizeObserver usage in React components with TypeScript.

Create a ref object using the useRef hook and assign it to the element you want to observe.
Call the useEffect hook in your React component with a callback function [] as the dependency array.
Inside, create the resize observer using new ResizeObserver(...) pass it the handler function.
Start tracking the element's size with a call to ResizeObserver.observe(element).
Return the cleanup function from useEffect that calls ResizeObserver.disconnect() to stop tracking the element when the component is unmounted.

The `useResizeObserver` hook

If you need to use resize observers often, writing the above code can become cumbersome and repetitive. You can move it to a reusable hook that allows you to easily keep track of the element's dimensions:

import { useLayoutEffect, useRef } from 'react';

function useResizeObserver(
  callback: (target: T, entry: ResizeObserverEntry) => void
) {
  const ref = useRef(null)

  useLayoutEffect(() => {
    const element = ref?.current;

    if (!element) {
      return;
    }

    const observer = new ResizeObserver((entries) => {
      callback(element, entries[0]);
    });

    observer.observe(element);
    return () => {
      observer.disconnect();
    };
  }, [callback, ref]);

  return ref
}

export default useResizeObserver;

A reusable React hook for the ResizeObserver.

You can then use it like this:

import { useCallback } from "react";

function Example() {
  const onResize = useCallback((target: HTMLDivElement) => {
    // Handle the resize event
  }, []);

  const ref = useResizeObserver(onResize);

  return ...;
}

Example usage of the useResizeObserver hook.

The onResize function must preserve its references between component re-renders, that's why we wrap it with the useCallback hook. Otherwise, the resize observer would be re-created on every re-render, which may lead to performance issues.

Conclusion

Using the resize observer in React is the same as using it in JavaScript, and you can use the useEffect hook to hook into the React component lifecycle, for instance, to start observing when the component is mounted.

There may be a case when you want to start observing when some event happens, e.g. a button is pressed. The important point is that the resize observer must keep the same reference between component re-renders.

To do that, you can assign the ResizeObserver instance to a ref object created with a call to useRef and access it on the .current property.

Here are the complete code examples you can copy and paste 👇

twitter-code/src/tooltips at main · vincaslt/twitter-code

Code examples from my Twitter @VincasStonys. Contribute to vincaslt/twitter-code development by creating an account on GitHub.

GitHubvincaslt

How to Add an Event Handler in React

Vincas Stonys — Tue, 07 Feb 2023 15:21:59 GMT

React has its own event system that's similar to the DOM event system, but that works in parallel to it. That means that React event handlers are assigned differently than DOM event listeners.

React Event Handlers

You can handle events in React by passing an event handler function as a prop JSX element:

import { MouseEvent } from "react";

function MyComponent() {
  const handleButtonClick = (e: MouseEvent) => {
    // Called when the button is clicked
  }
  
  return (
    
  )
}

Adding an event handler to React elements in TypeScript.

The event handler props are all camel-cased and accept a callback function. Some commonly used ones are onClick, onChange and onSubmit. The callback function will receive SyntheticEvent as the parameter.

DOM Event Handlers in React

It's sometimes necessary to use the DOM event system, for instance when integrating with 3rd party libraries or listening to window events.

You should use the useEffect hook to add event listeners in React. Here's how to listen to events on window in React:

function MyComponent() {
  useEffect(() => {
    const handleWindowResize = (e: UIEvent) => {
      // Called when browser window is resized
    };

    window.addEventListener("resize", handleWindowResize);
    return () => {
      window.removeEventListener("resize", handleWindowResize);
    };
  }, []);

  return <>...;
}

Adding an event handler to the window.

Add a call to useEffect and provide [] as the dependency list to only register the event listener once when the component is mounted.
Create a handler function inside of the useEffect hook's callback function.
Bind the event handler to an event using addEventListener on the DOM element.
Return a cleanup function for the useEffect hook that removes the assigned event handler.

Assigning DOM events to React elements

To assign the event listener to the React element you need to first get the reference to the underlying DOM element. This is commonly done using the useRef hook:

function MyComponent() {
  const buttonRef = useRef(null);

  useEffect(() => {
  	// 👇 Get the DOM element from the React element
    const element = buttonRef.current;
    
    if (!element) return;

    const handleButtonClick = (e: MouseEvent) => {
      // Called when button is clicked
    };

    element.addEventListener("click", handleButtonClick);
    return () => {
      element.removeEventListener("click", handleButtonClick);
    };
  }, []);

  return ;
}

Listening to DOM events on React elements using useRef to get their references.

Call the useRef and assign its value to the ref prop on the React element.
In the useEffect hook, get the reference to the DOM element from current property on the ref object. Check that it's not null.
Add the DOM event listener like before using addEventListener.

Conclusion

Always prefer to use the React event system, because it fixes certain inconsistencies, and working with it is generally easier.

In the rare cases when you do need DOM event listeners, assign them in the useEffect hook. You should first have the reference to the DOM element which you can get using the useRef hook or simply by querying it directly, e.g. window, document.body or document.querySelector(...).

Using Local Storage in JavaScript and React

Vincas Stonys — Mon, 30 Jan 2023 13:52:08 GMT

Local Storage in JavaScript

In the browser, you can access local storage through the window.localStorage property. The window is assumed though, so you can omit it and simply write localStorage.

Local storage gives access to 4 important functions:

setItem(key, value) - assign a string value to a key in local storage.
getItem(key) - get the value assigned to a key.
removeItem(key) - removes the value by key.
clear() - removes all values in local storage.

Here's the usage example:

const value = { name: 'Vincas', surname: 'Stonys' };

// 1️⃣ Stores the value. Must convert value to string first
localStorage.setItem('userInfo', JSON.stringify(value));

// 2️⃣ Gets the stored value and convert it to original value type
JSON.parse(localStorage.getItem('userInfo'));

Example usage of local storage in JavaScript.

What is local storage?

Local storage is basically a simple key-value map in your browser. It has a simple synchronous API that's available in all modern browsers.

The local storage is separate for every origin (hostname and port): https://vistontea.com and https://blog.vistontea.com won't share local storage.

You can inspect values stored in local storage via developer tools. For instance, using CTRL+SHIFT+C keyboard shortcut in Chrome (or CMD+SHIFT+C on Mac), then opening the Application tab.

Local storage in chrome devtools.

Local Storage in React

In React, you can use local storage directly using plain JavaScript.

A common use case for local storage is to persist local component state. In that case, it's useful to write a custom hook that synchronizes component state to local storage.

Here's a custom useStoredState hook example 👇

import { SetStateAction, useState } from 'react';

function useStoredState(key: string, defaultValue?: T | (() => T)) {
  // 👇 Load stored state into regular react component state
  const [state, setState] = useState(() => {
    const storedState = localStorage.getItem(key);

    if (storedState) {
      // 🚩 Data is stored as string so need to parse
      return JSON.parse(storedState) as T;
    }

    // No stored state - load default value.
    // It could be a function initializer or plain value.
    return defaultValue instanceof Function ? defaultValue() : defaultValue;
  });

  // 👇 Keeps the exact same interface as setState - value or setter function.
  const setValue = (value: SetStateAction) => {
    const valueToStore = value instanceof Function ? value(state) : value;
    localStorage.setItem(key, JSON.stringify(valueToStore));
    setState(valueToStore);
  };

  // as const tells TypeScript you want tuple type, not array.
  return [state, setValue] as const;
}

Custom hook to sync local storage with the component state.

The hook keeps the same return type as useState - a tuple with the value and value setter. Its parameters are the local storage key and the default value or the initializer function.
It initializes the local component state by getting its value by key from local storage and parsing it in the state initializer function.
A custom state setter function wraps the native setState with additional logic to store the value in local storage using localStorage.setItem function.

Here's how you might use it:

import * as React from 'react';
import useStoredState from './useStoredState';

export default function App() {
  // 👇 Will be stored in local storage, but used as regular state
  const [items, setItems] = useStoredState('items', ['item1', 'item2']);

  const handleAddClick = () => {
    setItems((items) => [...items, `item${items.length + 1}`]);
  };

  return (
    
      
        {items.map((item) => (
          {item}
        ))}
      
      
    
  );
}

You can see the full code example with demo here: https://stackblitz.com/edit/react-ts-x4nwoj?file=App.tsx

This is how it looks like in action 👇

0:00

Using Local Storage in TypeScript

You will notice that the localStorage property doesn't have great typings. It's useful to create your own wrapper around local storage that handles automatic value serialization and parsing.

Here's an example 👇

const storage = {
  set: (key: string, value: any) => {
    localStorage.setItem(key, JSON.stringify(value));
  },
  get: (key: string, defaultValue?: T): T => {
    const value = localStorage.getItem(key);
    return (value ? JSON.parse(value) : defaultValue) as T;
  },
  remove: (key: string) => {
    localStorage.removeItem(key);
  },
};

export default storage;

TypeScript wrapper for local storage with typings.

You could now use the storage utility instead of localStorage and provide the type for the value stored in local storage:

// No need to parse the value, it's handled by the wrapper
const value = storage.get<{ name: string, surname: string }>('userInfo');

Conclusion

Local storage is the easiest way to persist value in the browser, often eliminating the need for the backend server in the case of frontend-only apps.

In JavaScript, it's as simple as using functions exposed by localStorage object. In React you may use the same API, however, it's helpful to be more declarative and create higher-level utilities. I've given an example of a custom hook that synchronizes component state to local storage.

Succeed as a Junior Developer

Vincas Stonys — Fri, 13 Jan 2023 14:22:58 GMT

Being a junior developer is hard. At the start of my career, I used to feel overwhelmed, like I didn't know what I was doing. And that it was only a matter of time until I got exposed as the imposter that I was.

While I was at school and university, I seemed to have it all figured out - as long as you go to classes and maybe study a little, you're good. But when you're on your first day at work - what the hell do you do?

There were all these people I'd never met before (everyone was so serious), following some processes I didn't know (scrum-what?) And the codebase - larger and scarier than I've ever seen. Not to mention written in programming languages and frameworks I've never heard of (does anyone code in Groovy or use Ext.js anyway?)

I wish there was someone to reassure me or some sort of guidelines I could follow to not only survive but succeed. Well then...

After having been a professional software developer for over 7 years now, here's what I wish I knew at the beginning of my career as a junior developer.

1) First, Relax

When you're at your first job as a junior developer it's easy to get the impression you're expected to deliver results (and quickly). At least that's how it was for me - people around me were stressed, constantly talking about some deadline they have.

Don't get caught up in it. You as a junior developer are there to learn.

Dear Junior Developers, we didn’t hire you for your output.

We hired you for your future potential. Slow down and focus on up-skilling.
— Nikki Siapno (@NikkiSiapno) September 18, 2022

Nobody expects you to deliver. For the company - you're an investment. And to be a good investment - you need to grow (no... I meant your skills 🤦‍♂️).

Take your time with whatever you're doing, learn as much as you can, ask questions and try to enjoy the process.

2) Solve Problems Yourself

I remember when I discovered GitHub I wanted to use a 3rd party library for any problem I had. After all, why write the code yourself, if someone else already has?

Wrong. Your early career is a time for investments. You should try to solve every problem yourself even if it isn't optimal.

Over time you'll build up a database of go-to solutions in your head. And for the more complex problems, you'll know what to look for in a 3rd party solution - because you're familiar with the problem and know what a good solution should look like.

Again, your job as a junior developer is to learn first, and you learn nothing if you never try solving problems yourself.

3) Ask For Help Early

As a junior developer, you're bound to get stuck eventually (a lot, actually). This is where many junior developers get into trouble. They think they mustn't bother anyone with their stupid issues and instead pretend they're fine.

That's a huge red flag 🚩.

Always ask for help early. As a rule of thumb, if you're stuck, feel free to spend 15-30 minutes trying to figure it out yourself, but then please ask for help.

There's nothing worse than junior developers who're struggling but are pretending they're fine.

4) Ask For Help Correctly

As a junior developer, I was scared to ask for help because I thought the senior devs will be annoyed with my questions. And frankly, they probably were. But there is a way to make the experience pleasant for both you and the senior devs.

Here is what worked well for me 👇

Batch your questions.

Don't bother the senior dev every time you run into a problem. Write your question down and work on something else for a while. Once you have 3 or more questions (or some reasonable time has passed), go and ask them for help.

Do your part

Try to solve the problem first, then look for a solution online (e.g. documentation) and when you eventually ask for help - explain what you've tried. It's very frustrating when junior devs run into a problem, try nothing to solve it, then expect you to solve the problem for them.

Show willingness to learn

Never ask for the answer. Show them that you want to solve the problem yourself, and ask for a roadmap instead. You may ask for steps to find the solution, but if you're just asking for their solution, you're learning nothing (see tip #2).

5) Practice Humility

Senior developers know better (even if they don't). Don't be a rebel. Understand that you most likely know less than someone who's been doing this thing for years, and follow their instructions exactly.

Yes, there are stupid senior engineers. And yes, there are people who're just mean. Accept their criticism, learn what you can from them, and ignore the rest. Don't get discouraged by criticism.

These realizations have helped me tremendously in dealing with imposter syndrome and negative feedback:

Your code is not you.
Nobody really knows what they're doing.

Your time to shine will come - there will be opportunities for you to take on responsibility and show your creativity. When that time comes - overdeliver.

6) Take Ownership and Responsibility

This is the best way to shake off the "junior" label. From the start, I was happy to help other junior developers, which in the eyes of others has made me the most "senior" of the lot (even though we started at the same time with no prior experience).

Over time, I've learned some cool new tech by myself, which got popular (TypeScript), so then even senior devs went to me for help (huge confidence boost). In 2 of the companies I've worked at I was known as "The TypeScript Guy". Creating a niche for yourself is an excellent way to level up your career.

Voice your opinions, share your learnings, and when the opportunity for you to step up and show initiative comes - take it.

Here's a tip from me - write end-to-end tests. Nobody likes setting them up, nobody likes writing them, and nobody likes to be responsible for them. That's the perfect opportunity for a junior dev to show initiative 😉.

7) Build Side Projects

Most good developers I know build stuff in their own time. And I know many bad ones that don't. Building side projects is the best way to fast-track your career.

Let me put it this way - when you go to an interview, the interviewer is looking for proof that you're good, that you can get shit done. When you can point him to a real-world app you've built and deployed by yourself - you have undeniable proof that you can build and release apps.

I improved the most as a developer when I was building my side project mediabits.io. Also, it's been invaluable for my career - it has quite literally doubled my salary.

Instead of being a mere coding monkey, you become someone who builds products.

If you only learn from videos and books, never actually building anything by yourself, you risk getting into tutorial hell.

Ideally, the stuff you build should be something you need yourself and something you've built on your own (don't just follow a tutorial). Here are some ideas 👇

The best way to learn ReactJS is by building real-world applications.

Not sure what to build?

Here are 5 ideas for real-world frontend applications using free public APIs 👇 pic.twitter.com/X1yTH4ADjO
— Vincas Stonys (@VincasStonys) August 12, 2022

8) Focus on Fundamentals

Once you start building side-projects it's easy to get caught up trying to learn all the new technologies. This is overwhelming.

Make it your goal to deliver a working app, instead of learning the latest-greatest shiny new framework. Just pick a solid technology that's been around for a while and use that. New technologies come and go, but fundamentals stay.

Guess what, most new tech is just a flavor of the same old thing with some sprinkles on top. It's a lot better to spend time mastering JavaScript instead of learning about the nitty-gritty details of react-router.

Don't make it harder than it needs to be. You're inevitably going to learn a lot anyway.

9) Learn in Public

Not writing a blog or creating YouTube videos is the biggest regret I have from my early career. Even as I'm writing this blog, I've already forgotten a lot of the struggles I've had as a beginner.

Two things are well-known:

We learn best when we teach what we learn.
We learn best not from experts, but from someone who's only one step ahead.

Somebody else will find your content invaluable, and as a bonus, you'll be building an audience that you can monetize later to earn some side income.

At the moment, hashnode.dev and dev.to are the easiest way to start blogging for developers.

10) Don’t Stay In Your First Job for Too Long

This one is a bit controversial and you're free to ignore it, but it's something I regret doing early in my career.

I think it's best to change your first job after 1-2 years in the company (unless you landed a job at Google in which case, ignore what I tell you). Here's why:

Your opportunities for learning will be mostly exhausted.
You'll forever be junior in the eyes of the devs you first worked with.
You were underpaid when you started, and you will stay that way until you get a new job.

Money should not be the reason to leave your first job, but just keep in mind that salary grows relative to your current salary (usually around 5-10%). A market-level salary for a developer with 2-3 years of exp is at least 2x higher than an entry-level salary (quick math 🤔 ~50% increase for every year).

If you feel like you're becoming stagnant, don't let the fear or "loyalty" stop you from getting another job. Your company is not your family, as much as they wish it were true.

Conclusion

Early career as a junior developer is a scary period, but it gets very rewarding later on. I'm glad I had a few friends doing the same thing and struggling with the same feelings. I can't imagine how lonely it would've felt otherwise.

If you don't, I want you to at least have the guidelines I wish I had when I was just starting out. It all comes down to:

Learn as much as you can;
Share what you learn;
Build a solid foundation both in terms of skills and career.

Introduce yourself in the comments and let me know what you're struggling with. Feel free to connect with me on Twitter, where I share regular tips for junior developers building their first web app with React.

Read my guide to CSS next 👇

Practical CSS Guide for Busy Developers

Why waste time memorizing stuff you will never use? Here’s the only CSS guide you will ever need to start styling web pages.

Code FrontendVincas Stonys

Set up a React App With Typescript in 5 Minutes

Vincas Stonys — Tue, 10 Jan 2023 19:02:12 GMT

There are many ways to set up a new React app:

create-react-app has been the standard way to quickly start up a new React project, but it's starting to show its age;
nearly all React frameworks have a starter template, but you might not need or want to use a framework;
starter-kits are a popular option, but they're opinionated and add a lot of boilerplate and features, which is not ideal if you want to start minimally.

📌

The simplest and fastest way to start a new React application in 2023 is by using Vite.

Vite is a bundle of tools that help you develop your frontend apps, which includes a development server with hot module replacement, and a build toolchain with plugin support.

Vite uses native ES modules so it's extremely fast.

Using Vite to set up a React project

Starting a new project with Vite is as simple as running npm create vite@latest with your project name and preferred starter template.

Here's how to start a new React project with TypeScript named my-first-app:

npm create vite@latest my-first-app -- --template react-ts

This command will create a new folder with your React app, so navigate into it and install dependencies:

cd my-first-app
npm install

However, there are a couple of extra steps you should take to make your environment ready for development.

1) Set up ESLint

ESLint will help you catch small errors such as undeclared variables. It also lets you enforce good practices, such as providing a complete dependency list for certain React hooks like useEffect or useMemo.

To install ESLint in your Vite project run:

npm install -D eslint eslint-config-react-app

This command also installs the eslint-config-react-app which is the same exact configuration create-react-app uses. Extend it by creating a .eslintrc file in the root of the project folder with this code:

{
  "extends": "react-app"
}

Finally, make sure ESLint is picked up by your IDE, if you use VSCode, you will need to install an extension.

ESLint extension for VSCode.

2) Set up Prettier

Prettier automatically formats your code so you don't need to waste your time debating spaces over tabs or aligning indentations. It's especially critical in making code formatting consistent when you work with others.

First, install the VSCode extension (or whatever your IDE is).

Prettier extension for VSCode.

It will use the default configuration which is good for most people, but if you want to override with your own rules, create a .prettierrc file and provide your rules there.

Then, configure VSCode to auto-format on save and use Prettier as the default formatter:

Toggle format on save.

Set Prettier as the default formatter.

3) Remove unnecessary files

The Vite template comes with a simple demo app, but you might want to start fresh:

Remove the assets folder and App.css
Remove everything inside index.css
Remove everything inside App.tsx

Here's what you will have in the end:

The final project file structure.

Conclusion

Vite is the easiest way to start your React frontend application at the moment.

Its default configuration is great for most cases, but its capabilities can be extended with plugins, for instance, if you're working with SVG images, you may want to import them as React components - vite-plugin-svgr can help you with that.

Vite, unlike create-react-app, doesn't come with ESLint configuration, so you will have to manually set it up, along with Prettier. Luckily, it's very simple, and I've provided a guide for that in this post.

Implement Scroll-Snapping Using Only CSS

Vincas Stonys — Sun, 11 Dec 2022 16:21:09 GMT

Scroll snapping can be achieved using CSS:

Enable scrolling on the parent element with overflow: auto.
Set the scroll-snap-type property on the parent element.
Set the scroll-snap-align property on the child element to snap to it.

Scroll Snapping Example

Here's an example of how to enable scroll-snapping on the x-axis using CSS:

.parent {
  /* 1️⃣ enable scrolling */
  overflow: auto;
    
  /* 2️⃣ enable scroll-snapping on horizontal axis */
  scroll-snap-type: x mandatory; 
}

.child {
  /* 3️⃣ snap to the start of the element*/
  scroll-snap-align: start;
}

Here's what it looks like:

CSS-only scroll snap example.

Scroll Snap Type

The scroll-snap-type property accepts two values - axis and strictness. The axis can be:

x - horizontal;
y - vertical;
both - both, but it may snap to different elements.

The strictness (second value) can be:

mandatory - always snaps to the element or resets the scroll attempt if not close enough to the alignment point.
proximity - snaps only when close to the alignment point, in other cases the scroll position is left unchanged.

Scroll Snap Align

The scroll-snap-align property accepts a single value - alignment point:

center - the center of the element;
start - the start of the element based on the scroll-snap axis;
end - the end of the element.

Conclusion

Basic scroll snapping could be implemented without any JavaScript using the scroll-snap-type and scroll-snap-align CSS properties.

If you'd like to see the complete example, you can find it on my GitHub:

twitter-code/src/scroll-snap at main · vincaslt/twitter-code

Code examples from my Twitter @VincasStonys. Contribute to vincaslt/twitter-code development by creating an account on GitHub.

GitHubvincaslt

Easiest Way to Truncate Text With Ellipsis in CSS

Vincas Stonys — Sat, 29 Oct 2022 09:06:49 GMT

So your designer has asked you to add the three dots at the end when the text doesn't fit, and you have no clue how to do that?

Don't worry, it's super simple to do with CSS.

By the way, those three dots at the end are called ellipsis.

Real quick - would you like to master CSS and learn Web Development? If so, be sure to check out the platform I recommend to learn coding online:

Learn Coding Online

Here’s the platform I recommend if you want to learn Web Development online.

Code FrontendVincas Stonys

Single-line ellipsis

Use text-overflow: ellipsis; to automatically truncate the text when it overflows the container and add the three dots at the end.

The element needs to get resized and the text has to stay in one line for the ellipsis to show up, so here are all 3 CSS lines you need:

.ellipsis {
  text-overflow: ellipsis; /* enables ellipsis */
  white-space: nowrap; /* keeps the text in a single line */
  overflow: hidden; /* keeps the element from overflowing its parent */
}

Single-line ellipsis using CSS.

📣

The parent container often allows its contents to overflow, making the ellipsis not show up. Add overflow: hidden; to the parent container to fix that.

Example of single-line ellipsis in practice.

Multi-line ellipsis

You will soon find, that text-overflow: ellipsis; doesn't work when the text wraps to an extra line.

To truncate multi-line text and add an ellipsis at the end of the last line use the experimental -webkit-box box model (don't worry it's supported in all major browsers):

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

Multi-line ellipsis using CSS.

Control how many lines to show with -webkit-line-clamp. It is important to let the text wrap by setting the white-space property to pre-wrap or normal.

📣

Same as before, the parent container needs to clip its children. Add overflow: hidden; to the parent element.

Example of multi-line ellipsis in practice.

Conclusion

It's trivial to truncate the overflowing text and add an ellipsis at the end of a single line. Adding an ellipsis for multiline text is a bit more tricky, so this post should help you.

You can find the code examples for this article on my GitHub: https://github.com/vincaslt/twitter-code/tree/main/src/ellipsis

Since you're learning CSS tricks, why not go through my practical CSS guide? It will take only 5 minutes, but it will teach you all of the CSS you need in practice:

Practical CSS Guide for Busy Developers

Why waste time memorizing stuff you will never use? Here’s the only CSS guide you will ever need to start styling web pages.

Code FrontendVincas Stonys

Practical CSS Guide for Busy Developers

Vincas Stonys — Fri, 28 Oct 2022 20:03:02 GMT

If you're like me and prefer to learn by starting to build first and googling when you get stuck, this CSS guide is for you.

It will give you a crash course in only the CSS you absolutely need in practice, wasting no time on stuff you can google once you need it.

Give me 5 minutes of your time and you will be on your way to building your app.

What is CSS?

CSS stands for Cascading Style Sheets - it's a language used to add styles to web pages by describing how elements should be displayed.

Elements are styled using CSS by selecting them with selectors and setting values for their properties:

p {
  background-color: green;
}

CSS code example

In the above example, all

elements will be selected and given a green background color.

CSS Selectors

There are three primary types of selectors:

element - any HTML tag p, div, h1, etc.
class - string in class attribute prefixed with a dot, e.g.
can be selected with .section
id - string in id attribute prefixed with a hashtag, e.g.
can be selected with #nav-bar

I recommend primarily using classes to style your elements because elements can have more than one class, making it easy to extend or override styles.

There are three ways to combine selectors:

comma - to select all elements matching any of the comma-separated selectors and apply the same style.
space - to select a nested element, by describing its path. For instance .section h1 will select a h1 element that's a child of an element with class section.
nothing - appending more class selectors to an existing selector will increase its specificity, e.g. h1.title will select
elements with class="title".

Cascading

You can combine and override styles by using selectors with higher specificity. A simple way to make the selector more specific is to give it more classes.

.text {
  color: #cccccc;
  font-size: 14px;
}

p.text.small-text {
  font-size: 12px;
}

Overriding element style with more specific selector

In this example, all elements with class="text" will have a gray color and 14px text size. The

elements with class="text small-text" will have the same gray color, but their text size will be 12px instead because of the more specific selector that overrides the font-size property.

In practice, I recommend keeping selectors as simple as possible, such as using only a single class and not cascading the styles too much.

Adding CSS styles

There are two ways to add styles to your elements:

style attribute - HTML elements can have a style attribute, where you can directly write CSS expressions that will be applied to the element, for example:
stylesheets - declared either between the

Code Frontend

Deploy a Remix+Drizzle Shopify App on Cloudflare Pages, D1 & KV

Why Use Cloudflare for Shopify Apps?

Step 0: Create a Partner Account and a Development Store

Step 1: Initialize a Shopify App with Remix

Step 2: Update Config Files for Cloudflare

Install dependencies and update package.json

Update Typescript Configuration

Extend the Remix server

Step 3: Update Shopify Setup for Cloudflare

Update the usages of Shopify

In app/entry.server.tsx

In app/root.tsx

In app/routes/*

Step 4: Using Drizzle with D1

Add Drizzle ORM

Using drizzle in the app

Step 5: Deploying Your Shopify App

Deploying the D1 database

Deploying the application

Configure KV store and D1 bindings

Bind Shopify environment variables

Change app URLs in Shopify partner dashboard

Final cleanup

Template Repository

Copy To Clipboard In JavaScript and React

Copy to Clipboard in JavaScript

Using Clipboard API in React

Copy to clipboard button in React

Conclusion

Want to Build a Shopify App? Here’s What You Should Know

What was the app?

Setting up the app

Adding theme extensions

Liquid templates

{{ block.settings.heading }}

Fetching WordPress posts

Accessing settings in JavaScript files

4) Add Sitemap and Robots.txt

Robots.txt

Sitemap

5) Ensure Great Performance

6) Server-Side Render

7) Ensure Correct File Formats

Using SVGs

Responsive images

8) Minify Your Code

9) Ensure Good Accessibility

10) Ensure Good Content Structure

then , but not then .

, but not then .

then .

.

11) Ensure Good URL Structure

12) Use HTTPS

Conclusion

How to Get the Value From Input Field in React

Conclusion

How to Use Resize Observer in React

Using the Resize Observer in Javascript

Using the Resize Observer in React

The useResizeObserver hook

Conclusion

How to Add an Event Handler in React

React Event Handlers

DOM Event Handlers in React

Assigning DOM events to React elements

Conclusion

Using Local Storage in JavaScript and React

Local Storage in JavaScript

What is local storage?

Local Storage in React

Using Local Storage in TypeScript

Conclusion

Succeed as a Junior Developer

1) First, Relax

2) Solve Problems Yourself

3) Ask For Help Early

4) Ask For Help Correctly

Batch your questions.

In `app/entry.server.tsx`

In `app/root.tsx`

In `app/routes/*`

then
, but not
then
.

, but not
then
.

then
.

The `useResizeObserver` hook

elements with `class="title"`.