Forem: Tony Spiro

How to Migrate from Drupal to Cosmic

Tony Spiro — Sun, 12 Apr 2026 22:19:23 +0000

Drupal served a generation of content teams well. But between the PHP overhead, major-version upgrade cycles, and the complete absence of native AI capabilities, many teams are now making the move to a modern headless CMS. This guide walks you through migrating from Drupal to Cosmic step by step, with real TypeScript code you can run today.

Why Teams Are Leaving Drupal Now

Drupal 7 reached end-of-life in January 2025. That forced thousands of organizations into a choice: invest heavily in upgrading to Drupal 10, or use the moment as an opportunity to rethink the architecture entirely.

The case for moving on is strong:

Module sprawl and complexity. Most production Drupal sites run dozens of contrib modules. Each one is a maintenance burden and a potential security surface.
Dev-only content changes. Even simple schema changes, like adding a field to a content type, typically require a developer, a code deployment, and a cache flush.
No native AI. Drupal was designed long before LLMs. Every AI integration is a custom module or a fragile third-party connector.
Infrastructure overhead. A production Drupal site needs a server (or managed host), a MySQL/PostgreSQL database, and caching layers like Varnish or Redis.

Cosmic removes all of that. Fully managed cloud, REST API, TypeScript SDK, built-in AI Agents, and a visual schema builder. Let's move your content.

Drupal to Cosmic Concept Mapping

Before writing a single line of code, it helps to understand how Drupal's concepts translate to Cosmic's model:

Content Types = Object Types (defined in Cosmic's schema builder, no code required)
Nodes = Objects (each piece of content is an Object)
Fields = Metafields (text, number, date, file, select, relationship, and more)
Taxonomies = Select/multi-select metafields or related Objects
Media = Cosmic Media (imgix CDN - upload once, serve globally)
Views = REST API queries with filters
Modules = Integrations / Cosmic SDK
Roles & Permissions = Team member roles in Cosmic

Step-by-Step Migration Guide

Step 1: Audit Your Drupal Content Model

Before you export anything, document what you have. In Drupal, navigate to Structure > Content Types and list every content type. For each, note:

All field names, types, and cardinality (single vs. multiple values)
Which fields are required
Any taxonomy references
Any entity references (related content)

Create a spreadsheet mapping each Drupal content type and field to its Cosmic equivalent. This is your migration blueprint.

Step 2: Create Your Cosmic Object Types

Sign up at cosmicjs.com and create a new Bucket. For each Drupal content type, create a matching Object Type in Cosmic using the visual schema builder in the dashboard.

Field type mapping:

text_long / text_with_summary = Markdown or HTML-textarea metafield
integer / decimal = Number metafield
boolean = Switch metafield
datetime = Date metafield
image (with file) = File metafield
entity_reference (single) = Object metafield
entity_reference (multiple) = Objects metafield
list_string / taxonomy term reference = Select or Multi-select metafield

Step 3: Export Your Drupal Content

Enable Drupal's JSON:API module (included in Drupal 8.7+ core) if it isn't already active. Then export your nodes:

// Fetch all nodes of a given content type from Drupal's JSON:API
async function exportDrupalNodes(contentType: string) {
  const baseUrl = process.env.DRUPAL_BASE_URL
  let url = `${baseUrl}/jsonapi/node/${contentType}?page[limit]=50`
  const allNodes = []

  while (url) {
    const res = await fetch(url)
    const json = await res.json()
    allNodes.push(...json.data)
    url = json.links?.next?.href || null
  }

  return allNodes
}

For large datasets, paginate through all records and save them to local JSON files before importing.

Step 4: Import Content to Cosmic via the REST API

import { createBucketClient } from '@cosmicjs/sdk'

const cosmic = createBucketClient({
  bucketSlug: process.env.COSMIC_BUCKET_SLUG!,
  writeKey: process.env.COSMIC_WRITE_KEY!,
})

async function importNodes(nodes: any[], objectType: string) {
  const results = { success: 0, failed: 0, errors: [] as string[] }

  for (const node of nodes) {
    try {
      await cosmic.objects.insertOne({
        type: objectType,
        title: node.attributes.title,
        metadata: {
          body: node.attributes.body?.processed || '',
          summary: node.attributes.body?.summary || '',
          // Map additional fields here
        },
      })
      results.success++
    } catch (err: any) {
      results.failed++
      results.errors.push(`${node.attributes.title}: ${err.message}`)
    }
  }

  return results
}

Tips:

Run the import in batches of 50-100 objects at a time
Log successes and failures separately so you can re-run failures without duplicating successful imports

Step 5: Migrate Media Files

Drupal stores media files locally or on a CDN. Cosmic uses imgix for global media delivery.

async function migrateMedia(drupalFileUrl: string, fileName: string) {
  const cosmic = createBucketClient({
    bucketSlug: process.env.COSMIC_BUCKET_SLUG!,
    writeKey: process.env.COSMIC_WRITE_KEY!,
  })

  // Fetch file from Drupal
  const fileRes = await fetch(drupalFileUrl)
  const fileBuffer = await fileRes.arrayBuffer()
  const blob = new Blob([fileBuffer])

  // Upload to Cosmic Media
  const { media } = await cosmic.media.insertOne({
    media: { data: blob, name: fileName },
  })

  return media.imgix_url // Ready to use with imgix transformations
}

Once uploaded to Cosmic, every image is automatically served through imgix with on-the-fly resizing, format conversion (WebP, AVIF), and global CDN delivery.

Step 6: Set Up Webhooks and Rebuild Your Frontend

Cosmic's webhook system lets you trigger rebuilds on your frontend whenever content changes. For a Next.js frontend:

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get('secret')
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 })
  }

  revalidatePath('/', 'layout')
  return NextResponse.json({ revalidated: true })
}

Cosmic works with all major frontend frameworks: Next.js, React, Vue, Nuxt, Astro, Remix, and Svelte.

Step 7: Test, Redirect, and Go Live

Before flipping DNS:

Compare content counts between Drupal and Cosmic to verify completeness
Spot-check 10-20 objects across different content types
Verify all media URLs resolve via imgix
Test your frontend against the Cosmic API in a staging environment
Set up 301 redirects from old Drupal URLs to new paths
Monitor API response times (target: under 100ms)

Migration Checklist

[ ] Audit all Drupal content types and fields
[ ] Map Drupal fields to Cosmic metafield types
[ ] Create all Object Types in Cosmic
[ ] Export all Drupal nodes via JSON:API
[ ] Export all Drupal taxonomy terms
[ ] Export all media files and metadata
[ ] Import content to Cosmic via TypeScript SDK
[ ] Migrate media files to Cosmic Media (imgix)
[ ] Verify object counts match
[ ] Spot-check content for formatting issues
[ ] Build or adapt frontend to use Cosmic REST API
[ ] Set up webhooks for incremental rebuilds
[ ] Configure 301 redirects for all changed URLs
[ ] Test full site in staging
[ ] Flip DNS to new frontend
[ ] Monitor error rates and API latency post-launch
[ ] Decommission or archive Drupal server

What You Get on the Other Side

After migrating to Cosmic, your team gets:

A clean REST API with sub-100ms response times and 99.9% uptime SLA
TypeScript SDK and CLI for fast local development
Built-in AI Agents that live in Slack, WhatsApp, and Telegram
MCP Server for native AI tooling integration
imgix CDN for all media with on-the-fly transformations
A visual schema builder so editors can propose content model changes without involving a developer
No more major version migrations. Ever.

Originally published on cosmicjs.com

Build and deploy a Next.js ecommerce website in 5 steps

Tony Spiro — Thu, 02 May 2024 15:51:08 +0000

In this article, I'm going to show you how to build and deploy an ecommerce website in 5 steps. By leveraging the Cosmic React component library Blocks, we can build a high performance ecommerce website ready to accept product purchases in a matter of minutes. Let's go.

1. Install the Cosmic ecommerce Block

Start by installing a new Next.js app. Run the following command in your terminal application.

bunx create-next-app@latest cosmic-ecommerce && cd cosmic-ecommerce

Make sure to set the options to the following:

Next, log in to Cosmic and create a new empty Project.

Go to Project > Extensions and install the Cosmic Blocks extension. Find the ecommerce Block.

Follow the steps to install the Block content which includes content model and demo content.

Then run the command to install the ecommerce components in your codebase.

bunx @cosmicjs/blocks add ecommerce image-gallery

Create a new .env.local file and add your Cosmic API keys found in the Cosmic dashboard at Project > API keys:

# .env.local
COSMIC_BUCKET_SLUG=your_cosmic_bucket_slug
COSMIC_READ_KEY=your_cosmic_read_key
COSMIC_WRITE_KEY=your_cosmic_write_key

To create a shop page, add a new file located at app/shop/page.tsx with the following:

// app/shop/page.tsx
import { ProductList } from "@/cosmic/blocks/ecommerce/ProductList";
export default async function Shop() {
  return (
    <ProductList
      query={{ type: "products" }}
    />
  );
}

To create single product pages, add a new file located at app/shop/[slug]/page.tsx with the following:

// app/shop/[slug]/page.tsx
import { SingleProduct } from "@/cosmic/blocks/ecommerce/SingleProduct"
export default async function SingleProductPage({
  params,
  searchParams
}: {
    params: { slug: string }
    searchParams: {
      success?: string
    }
  }) {
  return (
    <SingleProduct
      query={{ slug: params.slug, type: "products" }}
      purchased={searchParams.success ? true : false}
    />
  );
}

Run the app to see the progress so far:

bun dev

You should see the store available at http://localhost:3000/shop (but not yet able to checkout with Stripe).

2. Configure Stripe

Next, we will enable checkout and payment processing through Stripe. First, install the Stripe clients with the following command:

bun add stripe @stripe/stripe-js

Add your Stripe API keys to the .env.local file. Find your Stripe API keys in the Stripe dashboard.

// .env.local
...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=change_to_your_stripe_public_key
STRIPE_SECRET_KEY=change_to_your_stripe_secret_key

Next, update your app/layout.tsx file to include the CartProvider to the layout. (Note: this assumes you've already added the Layout Block).

// app/layout.tsx
import "./globals.css";
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
import { CartProvider } from "@/cosmic/blocks/ecommerce/CartProvider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CartProvider>
          <Header />
          {children}
          <Footer />
        </CartProvider>
      </body>
    </html>
  );
}

Next, let's add the checkout component to components/Header.tsx.

// components/Header.tsx
import Link from "next/link";
import { cosmic } from "@/cosmic/client";
import { NavMenu } from "@/cosmic/blocks/navigation-menu/NavMenu";
import { CheckOut } from "@/cosmic/blocks/ecommerce/CheckOut";

export async function Header() {
  // Header data
  const { object: settings } = await cosmic.objects
    .findOne({
      type: "global-settings",
      slug: "settings",
    })
    .props("metadata")
    .depth(1);

  return (
    <div className="space-x-4 sticky top-0 bg-white/20 dark:bg-black/20 backdrop-blur-lg py-2 w-full z-[9999]">
      <div className="m-auto flex items-center md:container justify-between pl-2 pr-4">
        <Link href="/">
          <img
            src={`${settings.metadata.logo.imgix_url}?w=500&auto=format,compression`}
            alt={settings.metadata.company}
            className="h-10 m-auto dark:hidden"
          />
          <img
            src={`${settings.metadata.dark_logo.imgix_url}?w=500&auto=format,compression`}
            alt={settings.metadata.company}
            className="h-10 m-auto hidden dark:block"
          />
        </Link>
        <NavMenu query={{ type: "navigation-menus", slug: "header" }} />
        <CheckOut className="ml-4" productPath={"/shop"} />
      </div>
    </div>
  );
}

Next, let's add the checkout API route to our Next.js app located at app/api/checkout/route.ts with the following:

// app/api/checkout/route.ts
import { type NextRequest, NextResponse } from "next/server";
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

export async function POST(request: NextRequest) {
  const res = await request.json();
  const stripe_product_ids = res.stripe_product_ids;
  try {
    let line_items = [];
    let mode = "payment";
    for (const stripe_product_id of stripe_product_ids) {
      const product = await stripe.products.retrieve(stripe_product_id);
      const price = await stripe.prices.retrieve(product.default_price);
      line_items.push({
        price: price.id,
        quantity: 1,
      });
      // If any items are recurring
      if (price.type === "recurring") mode = "subscription";
    }
    const session = await stripe.checkout.sessions.create({
      line_items,
      mode,
      success_url: `${res.redirect_url}/?success=true`,
      cancel_url: `${res.redirect_url}/?canceled=true`,
    });
    return Response.json({ url: session.url });
  } catch (err) {
    return NextResponse.json(err, { status: 500 });
  }
}

3. Install Stripe extension

Next, go to Project > Extensions in the Cosmic dashboard and install the Stripe Products Extension. This will enable the connection between the products in Cosmic and Stripe. After installing the extension to your Project, follow the steps to add your Stripe secret key to the extension configuration.

4. Add products to Stripe

After installing the Stripe Products Extension, you should now see a button on the Product page to add the product to Stripe.

Click this button to sync your Product data to Stripe including title, image, price, and option for recurring payments (subscription).

Next, go back to your app running locally and see that the checkout is now working on any product that has been connected with Stripe (you may need to refresh the page).

5. Deploy to your website hosting provider

Next, we'll deploy our ecommerce website to Vercel (which is a great choice to host your Next.js website). Other hosting options include Netlify and Render.

First, create a new git repository in GitHub and follow the steps to push your Next.js ecommerce website code.

After you have pushed your code to the repository, go to the Vercel dashboard and add a new project connected to the code repository you just created in GitHub. (Note: This requires you to enable Vercel to access your GitHub repository.)

Then add your environment variables located in your .env.local file. Tip: You can add the full contents of the .env.local file by copy / pasting it into the first field in the Vercel form.

Now deploy your code. 🚀

You should now see a production build of your ecommerce website ready to take payments for your products and services. 💰

Next steps

I hope you enjoyed this quick tutorial on building an ecommerce website with Cosmic Blocks, Stripe, and Vercel. Check out more Blocks to explore to help you build optimized web experiences faster.

If you have any questions, reach out to me on X (fka Twitter) or on the Cosmic Discord server.

Best Practices using React Server Components with a Headless CMS

Tony Spiro — Tue, 05 Dec 2023 15:33:48 +0000

Since React Server Components (RSCs) hit the scene, the concept of server-side rendering React has become a polarizing topic, garnering praise, skepticism as well as becoming the target of many developer jokes.

After exploring RSCs with Next.js (available since Next.js 13), I have to say that it offers quite a significant improvement to developer experience compared to pre-RSC Next.js especially when working with a headless CMS.

In this article, we’re going to cover best practices for using React Server Components along with a headless CMS. We’ll also cover when to use client-side components and how to best structure your websites and apps for efficient data fetching from a headless CMS, in our case Cosmic (learn more about Cosmic here). Alright, let’s get into it:

1. Install the template

First install a new Next.js 14 app (you will need bun installed)

bunx create-next-app cosmic-demo

Yes / No to the following:

✔ Would you like to use TypeScript? … No / Yes (Select Yes)
✔ Would you like to use ESLint? … No / Yes (Select Yes)
✔ Would you like to use Tailwind CSS? … No / Yes (Select Yes)
✔ Would you like to use `src/` directory? … No / Yes (Select No)
✔ Would you like to use App Router? (recommended) … No / Yes (Select Yes)
✔ Would you like to customize the default import alias (@/*)? … No / Yes (Select No)

Get in there and fire up this bad boy:

cd cosmic-demo
bun dev

You should now see the default template running at http://localhost:3000. It should look like this:

2. Copy + paste the Tailwind UI page example

To get up and running quickly, we’ll grab a Tailwind CSS UI demo page located here:

Make sure to select the React option:

Paste it into app/page.tsx. After saving, you’ll notice it throws an error because you cannot use lifecycle events such as useEffect() or state in a React Server Component.

So we'll need to remove the client-side code from this page and move it elsewhere. But before we do that, let's install the missing dependencies:

bun add @headlessui/react @heroicons/react

And let’s comment out the dark style in globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* :root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
} */

3. Separate the components

Since we can't use any client-side functionality in RSCs (in our case the onClick event for opening the mobile drawer and useState hook which handles client-side state), we'll need to separate this functionality into client components.

Create a new folder titled components and add a file titled Header.tsx and put everything from the <header> tags into it along with the dependencies and state functions.

In Header.tsx add “use client” to the top of the file. You will see now we have client-side interactions in the nav on mobile:

But there's a problem: we don’t want to render the FULL navigation client-side because that would negatively impact SEO. Since only the mobile functionality needs to render client-side, we can put the mobile drawer into its own component.

Create a new file at components/MobileNav.tsx and move the mobile nav client code which includes the nav button and the <Dialog> component and any dependencies. We'll come back to this after we power up our React Server Components with dynamic content from the Cosmic CMS.

This gives us three component files:

app/page.tsx - RSC
components/Header.tsx - RSC
components/MobileNav.tsx - Client component

4. Add Cosmic power

Now that we have a separation between our server and client code, let’s add the Cosmic magic. In the Cosmic dashboard, create a new Project and new Object type titled Page with the following Metafields:

Headline - Text
Subheadline - Text
Hero - Image

Create a new Page in Cosmic titled Home and add any content you want.

Add the Cosmic JavaScript SDK with:

bun add @cosmicjs/sdk

Next add the a new file lib/cosmic.ts with the following (Go to Bucket > API keys to get your Bucket slug and read key).

// lib/cosmic.ts
import { createBucketClient } from "@cosmicjs/sdk";
export const cosmic = createBucketClient({
  bucketSlug: "YOUR_BUCKET_SLUG",
  readKey: "YOUR_BUCKET_READ_KEY",
});

Then in your app/page.tsx file add the following (note where we add the Cosmic-powered sections).

// app/page.tsx

import { cosmic } from "@/lib/cosmic";

export default async function Home() {
  // fetch Cosmic data
  const { object: page } = await cosmic.objects
    .findOne({
      type: "pages",
      slug: "home",
    })
    .props("metadata")
    .depth(1);

  return (
    <main>
      <div className="relative isolate px-6 pt-14 lg:px-8">
        <div
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
            }}
          />
        </div>
        <div className="mx-auto max-w-2xl sm:py-48">
          <div className="hidden sm:mb-8 sm:flex sm:justify-center">
            <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
              Announcing our next round of funding.{" "}
              <a href="#" className="font-semibold text-indigo-600">
                <span className="absolute inset-0" aria-hidden="true" />
                Read more <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </div>
          <div className="text-center">
            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
              {page.metadata.headline}
            </h1>
            <p className="mt-6 text-lg leading-8 text-gray-600">
              {page.metadata.subheadline}
            </p>
            <div className="mt-10 flex items-center justify-center gap-x-6">
              <a
                href="#"
                className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
              >
                Get started
              </a>
              <a
                href="#"
                className="text-sm font-semibold leading-6 text-gray-900"
              >
                Learn more <span aria-hidden="true">→</span>
              </a>
            </div>
          </div>
        </div>
        <img src={page.metadata.hero.imgix_url} className="w-full" />
      </div>
    </main>
  );
}

Note here that we are exporting an async function which is unique to React Server Components, enabling us to use await cosmic.objects.findOne() to fetch our page from Cosmic!

The big takeaway: No need messing with getStaticProps, getServerSideProps, or getStaticPaths it Just Works™.

5. Adding the global header

You may now notice an issue: we lost our navigation. So let's add our global header back. Because we’ll want to have the header navigation show up globally on all pages, let’s add it to our app/layout.tsx file:

// app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Header } from "@/components/Header";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
        {children}
      </body>
    </html>
  );
}

Next let’s add dynamic content to our nav elements. In the Cosmic dashboard, create a new Object type titled Nav with the following Metafields:

Items - Repeater
- Text - Text
- Link - Text
- New Tab - Switch (boolean)

Next create a new Object titled Header and add some content.

Then add the following to your components/Header.tsx file:

// components/Header.tsx

import Link from "next/link";
import { cosmic } from "@/lib/cosmic";
import { MobileNav } from "@/components/MobileNav";

export type ItemType = {
  text: string;
  link: string;
  new_tab: boolean;
};

export async function Header() {
  // fetch Cosmic data
  const { object: nav } = await cosmic.objects
    .findOne({
      type: "navs",
      slug: "header",
    })
    .props("metadata")
    .depth(1);

  return (
    <div className="bg-white">
      <header className="absolute inset-x-0 top-0 z-50">
        <nav
          className="flex items-center justify-between p-6 lg:px-8"
          aria-label="Global"
        >
          <div className="flex lg:flex-1">
            <Link href="/" className="-m-1.5 p-1.5">
              <span className="sr-only">Your Company</span>
              <img
                className="h-8 w-auto"
                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                alt=""
              />
            </Link>
          </div>
          <MobileNav items={nav.metadata.items} />
          <div className="hidden lg:flex lg:gap-x-12">
            {nav.metadata.items.map((item: ItemType) => (
              <Link
                key={item.text}
                href={item.link}
                className="text-sm font-semibold leading-6 text-gray-900"
                target={item.new_tab ? "_blank" : ""}
              >
                {item.text}
              </Link>
            ))}
          </div>
          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
            <a
              href="#"
              className="text-sm font-semibold leading-6 text-gray-900"
            >
              Log in <span aria-hidden="true">&rarr;</span>
            </a>
          </div>
        </nav>
      </header>
    </div>
  );
}

Next add the following to your components/MobileNav.tsx file:

// components/MobileNav.tsx

"use client";

import Link from "next/link";
import { useState } from "react";
import { Dialog } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { ItemType } from "@/components/Header";

export function MobileNav({ items }: { items: Item[] }) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <>
      <div className="flex lg:hidden">
        <button
          type="button"
          className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
          onClick={() => setMobileMenuOpen(true)}
        >
          <span className="sr-only">Open main menu</span>
          <Bars3Icon className="h-6 w-6" aria-hidden="true" />
        </button>
      </div>
      <Dialog
        as="div"
        className="lg:hidden"
        open={mobileMenuOpen}
        onClose={setMobileMenuOpen}
      >
        <div className="fixed inset-0 z-50" />
        <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
          <div className="flex items-center justify-between">
            <Link href="#" className="-m-1.5 p-1.5">
              <span className="sr-only">Your Company</span>
              <img
                className="h-8 w-auto"
                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                alt=""
              />
            </Link>
            <button
              type="button"
              className="-m-2.5 rounded-md p-2.5 text-gray-700"
              onClick={() => setMobileMenuOpen(false)}
            >
              <span className="sr-only">Close menu</span>
              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
            </button>
          </div>
          <div className="mt-6 flow-root">
            <div className="-my-6 divide-y divide-gray-500/10">
              <div className="space-y-2 py-6">
                {items.map((item: ItemType) => (
                  <Link
                    key={item.text}
                    href={item.link}
                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                    target={item.new_tab ? "_blank" : ""}
                  >
                    {item.text}
                  </Link>
                ))}
              </div>
              <div className="py-6">
                <Link
                  href="#"
                  className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                >
                  Log in
                </Link>
              </div>
            </div>
          </div>
        </Dialog.Panel>
      </Dialog>
    </>
  );
}

This is now our only client-side component and receives the Nav items from Cosmic via props.

6. More pages

Now what if you want to create another page? Easy, go into Cosmic and create a new page titled About with whatever content you want:

Then create a new file located in app/about/page.tsx (notice the folder name is the page slug).

// app/about/page.tsx

import { cosmic } from "@/lib/cosmic";

export default async function Home() {
  const { object: page } = await cosmic.objects
    .findOne({
      type: "pages",
      slug: "about",
    })
    .props("metadata")
    .depth(1);
  return (
    <main>
      <div className="relative isolate px-6 pt-14 lg:px-8">
        <div
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
            }}
          />
        </div>
        <div className="mx-auto max-w-2xl sm:py-48">
          <div className="text-center">
            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
              {page.metadata.headline}
            </h1>
            <p className="mt-6 text-lg leading-8 text-gray-600">
              {page.metadata.subheadline}
            </p>
          </div>
        </div>
        <img src={page.metadata.hero.imgix_url} className="w-full" />
      </div>
    </main>
  );
}

Then add a new nav item in the Cosmic Object so you can get to it.

Click on the new nav link and your page is now there!

Notice that our global header is available on all pages because it was added to our layout.tsx file. And because Header is a React Server Component, it can fetch the CMS data directly, without having to do so on the page level which is also quite nice!

Another thing to note is that since the Header component is rendered in the layout and the navigation links use the Next.js <Link> element, it doesn’t refetch the data when you navigate between pages.

Conclusion

I hope you enjoyed this exploration of using React Server Components with a headless CMS. We covered:

When to use React Server Components and when to use client components.
We noted some of the benefits this new component structure offers when fetching data from a headless CMS. Specifically, we indicated that we can simply fetch data with an async function without having to use any pre-RSC methods in Next.js such as getServerSideProps, getStaticPaths, etc.
We also noted how RSCs make it easy to reuse data-powered components since the components themselves can fetch data server-side (for example our Header component).

React Server Components with Next.js makes for a simplified and improved developer experience when using a headless CMS.

4 Steps to Update the Next.js Marketplace Template

Tony Spiro — Thu, 07 Sep 2023 17:52:00 +0000

We recently updated the Next.js Marketplace template to the new Cosmic JavaScript SDK and I have to say, the process was quite quick and simple. The new SDK is much lighter in bundle size (by 93%) and provides a more declarative syntax including TypeScript support, making it the recommended way to connect your JavaScript apps to Cosmic.

The following article shows you the steps that were taken to make the upgrade and what to expect when you upgrade your projects to the new SDK.

Getting started

To get started, install the Next.js Marketplace template and view a live demo here.

The template includes common ecommerce marketplace functionality:

Browse, search, and filter products for sale.
Purchase a product using Stripe.
Create your own product for sale (requires Cosmic login).

Steps to Upgrade

The steps we took to upgrade this template are:

Installed the new Cosmic JavaScript SDK.
Updated the Bucket client configuration.
Added an additional parameter to fetch the products (depth).
Simplified the logic to add products.

You can see the pull request where each of the updates were made. Let's go over each step:

1. Install the Cosmic JavaScript SDK

First, we removed the deprecated Cosmic NPM module:

pnpm remove cosmicjs

Then we installed the new Cosmic JavaScript SDK:

pnpm add @cosmicjs/sdk

See the PR update.

2. Bucket configuration

Next, we updated the Bucket client configuration with the following code:

import { createBucketClient } from '@cosmicjs/sdk'

const cosmic = createBucketClient({
  bucketSlug: process.env.NEXT_PUBLIC_COSMIC_BUCKET_SLUG,
  readKey: process.env.NEXT_PUBLIC_COSMIC_READ_KEY,
  writeKey: process.env.COSMIC_WRITE_KEY,
})

See the PR update.

3. Object fetching

Then we added the depth parameter to the part of the code that handles the product fetching. Note: This is now required when fetching nested Object relationship data.

In this example, to fetch the nested data from categories along with the product data, which is connected to the product model by a Multi-Object relationship Metafield, we set a depth of 1.

const data = await cosmic.objects
  .find({
    type: 'products',
  })
  .props('title,slug,id,metadata.categories')
  .depth(1)

See the PR update. For more information about Metafields, see Metafields in the docs.

4. Adding Objects

And lastly, we updated the way products are created as this has been dramatically simplified in the new API. Instead of a large metafields array, you now have a concise metadata object. (Less code FTW!)

See the PR update.

Next steps

I hope you found this guide instructive. Sign up to get started using Cosmic to power content for your websites and apps.

If you are looking to migrate from the old dashboard, read the upgrade guide and reach out to Cosmic support if you need assistance.

Migrate from WordPress to a headless CMS in 3 easy steps

Tony Spiro — Wed, 16 Aug 2023 17:17:00 +0000

In this article I'm going to show you how to migrate from WordPress to a headless CMS in 3 easy steps. To make this quick and simple, we will be using the Cosmic WordPress Importer extension to import posts using any available WordPress RSS feed.

This article assumes that you already have at least a cursory knowledge of both WordPress and headless CMS. If you don't understand these concepts, I recommend you learn about headless CMS and check out the WordPress vs Headless CMS comparison page.

TL;DR

Install the WordPress extension

View the source code to see how the extension is built

WordPress fanboys need not apply

WordPress powers about 40% of the web. That's a lot of websites that are suffering from the same problems. Some people love WordPress, this article is not for them.

This article is for people who are fed up with the issues that come with one of the world's most popular content management systems and are ready to go headless. If this applies to you, let's get started.

1. Create a new Cosmic project

First create a free Cosmic account then set up a new project.

2. Install the Extension

Go to the Extensions tab then find the Cosmic WordPress Importer extension and install it.

3. Migrate your content

After you install the extension, you will be asked to add a feed URL to import the posts. A feed URL is any publicly available WordPress RSS feed (something like https://github.blog/feed).

Select how may posts you want to install and click "Submit". Automatically, the WordPress posts will populate into Cosmic. Refresh the page to see links to the posts available in Cosmic.

Your posts are now available via a simple API endpoint. The JSON data payload will look something like this:

{
  "objects": [
    {
      "slug": "angels-who-help-you-fly",
      "title": "Angels who help you fly",
      "metadata": {
        "content": "<p>Paddling out at Pacifica Beach on an unusually warm, beautiful day, I noticed a...",
        "snippet": "Paddling out at Pacifica Beach on an unusually warm, beautiful day, I noticed a guy...",
        "author": "Jane Mariechen",
        "categories": "Surfing, California"
      }
    },
    {
      "slug": "trust-yourself",
      "title": "Trust yourself",
      "metadata": {
        "content": "<p>I sat on the sidelines with anxiety as I watched the...",
        "snippet": "I sat on the sidelines with anxiety as I watched the big waves from a distance....",
        "author": "John Marieche",
        "categories": "Surfing, Hawaii"
      }
    }
  ]
}

You can now deliver your content to any website or application. FREEDOM!

Bonus points

Luckily, the Cosmic WordPress Importer extension code is available open source so you can customize the data that it pulls in. You can also learn how to build your own Cosmic extension.

Conclusion

I hope you found this article helpful. Sign up for Cosmic and reach out to Cosmic support if you have any questions or need dedicated migration support.

Building a Blog with Go, Tailwind CSS, Cosmic & Deploy to Heroku with GitHub Actions

Tony Spiro — Thu, 17 Sep 2020 16:16:06 +0000

In this walkthrough, I'm going to show you how I built a blog in Go with content powered by the Cosmic headless CMS. I'll also talk about styling it using Tailwind CSS and lastly, I'll show you how you can utilize GitHub Actions to deploy your Go-based applications to Heroku. Let's get started.

TL;DR

View Demo
View the full source code on GitHub
Install the App

Fundamentals

Every blog consists of at least two components:

List Page (Blog roll)
Individual Blog Post Page

Go is an excellent back-end language to build an optimized and highly concurrent application. In order to show the potential of Go to our Cosmic Community, I'll be building a simple blog application. To get started, we'll need to populate content in Cosmic.

Blog Data

In order to provide the blog post data, I installed the Simple Blog app on my Cosmic Account Bucket and voila my blog CMS and API service was ready within seconds.

But if you don't want to install an App and want to try it on your own, you can follow these steps.

Log in and Create a new Bucket in Cosmic
Create an Object Type Posts in that bucket.
Add following Metafields:
- Hero -> Image/File Metafield
- Description -> Textarea Metafield

Go App Code

This Go Blog app has three major components

Domain
Routes
Templates Now, I will go through each of them separately.

Domain

Go is a statically typed language, meaning, in order to work with Go, we need to create structs to process the data from the Cosmic API. In our blog application, I will be working with one data model Post. Our Post struct consists of Title, Slug, Content, CreatedAt and Metadata.

// Post is a representation of post object
type Post struct {
  Title     string
  Slug      string
  Content   template.HTML
  CreatedAt time.Time `json:"created_at"`
  Metadata  Metadata
}

As you see, I added json:"created_at" to our CreatedAt attribute, which I'll explain later on why it is required. Also, you see Metadata is a linked struct which contains hero and description Metafields from Cosmic CMS.

// Metadata is a representation of metadata object
type Metadata struct {
  Hero        Image
  Description string
}

// Image is a object of URL & ImgixURL
type Image struct {
  URL      string
  ImgixURL string `json:"imgix_url"`
}

As this point, our Domain is completed. But there are few more structs needed as our Cosmic API returns different JSON responses from the multiple Objects and single Object endpoints. Below is the full code for domain.go file which I put in src/domain directory for clean code structure.

package domain

import (
  "html/template"
  "time"
)

// ObjectsData is a array of objects from Cosmic API
type ObjectsData struct {
  Objects []Post
}

// ObjectData is a object from Cosmic API
type ObjectData struct {
  Object Post
}

// Post is a representation of post object
type Post struct {
  Title     string
  Slug      string
  Content   template.HTML
  CreatedAt time.Time `json:"created_at"`
  Metadata  Metadata
}

// Metadata is a representation of metadata object
type Metadata struct {
  Hero        Image
  Description string
}

// Image is a object of URL & ImgixURL
type Image struct {
  URL      string
  ImgixURL string `json:"imgix_url"`
}

As mentioned before, I added JSON field name from API response in front of some attributes i.e json:"created_at". It is because we will be using JSON Unmarshal in Go to parse and map the JSON response to our domain models. As it doesn't work with fields having underscore in it. So, we need to explicitly tell the name of the fields.

Now, I'll move to building routes and controllers for our application.

Routes (Controllers)

In every blog application, there are two major pages. One that will show the list of all blog posts and another which will show the single blog post. Before I'll implement controller actions, I'll show you how I set up the simple Go web server and routes using net/http and gorilla/mux modules. Below is the code for app.go file which is responsible for handling our routes and HTTP server.

package main

import (
  "fmt"
  "go-cosmic-blog/src/handlers"
  "go-cosmic-blog/src/utils"
  "log"
  "net/http"

  "github.com/gorilla/mux"
  "github.com/joho/godotenv"
)

func main() {
r := mux.NewRouter()

// Choose the folder to serve
staticDir := "/static/"

// Create the route
r.PathPrefix(staticDir).Handler(http.StripPrefix(staticDir, http.FileServer(http.Dir("."+staticDir))))

r.HandleFunc("/", handlers.Index).Methods("GET")
r.HandleFunc("/{slug}", handlers.Single).Methods("GET")

if err := godotenv.Load(); err != nil {
  log.Println("Error loading .env file")
}

port := utils.GetPortEnv()

fmt.Println("Starting server at port", port)
  if err := http.ListenAndServe(port, r); err != nil {
    log.Fatal(err)
  }
}

As you see I also included joho/godotenv and two local modules go-cosmic-blog/src/handlers and go-cosmic-blog/src/utils. joho/godotenv will handle the environment variables from .env file and go-cosmic-blog/src/utils have helper functions for our application.

You can look at .env.example file here and src/utils/helpers.go here.

Now, I'll show you the creation of Index Handler. To keep everything structured, I created index.go file in src/handlers/ directory. This index handler will fetch the blog posts from Cosmic CMS, parse and map it to our domain models and then send that data to HTML templates. So, our skeleton for Index handler is as bellow:

package handlers // our local package name

// Index handler to serve / route
func Index(w http.ResponseWriter, r *http.Request) {

    // Fetch list of objects from Cosmic CMS

    // Parse and map it to Domain Models

    // send that data to our templates
}

In order to fetch the post objects, I called the Cosmic CMS API endpoint. As this endpoint requires basic parameters like BUCKET_SLUG and READ_KEY. I put them in the .env so that we don't need to hard code them. Below code is getting these parameters from .env and then fetching post Objects from Cosmic CMS API.

if ok := utils.CheckIfEnvExists("BUCKET_SLUG"); !ok {
    http.Error(w, "BUCKET_SLUG is not present in the .env", http.StatusInternalServerError)
    return
}

var readKey string
if ok := utils.CheckIfEnvExists("READ_KEY"); ok {
    readKey = "&read_key=" + os.Getenv("READ_KEY")
}

bucketSlug := os.Getenv("BUCKET_SLUG")

url := utils.APIURL + bucketSlug + "/objects?&hide_metafields=true&type=posts&props=slug,title,content,metadata,created_at" + readKey

res, err := http.Get(url)
Then I used `json.Unmarshal` function to process the response and map it to our `ObjectsData` domain model.

var data domain.ObjectsData

if err != nil {
  log.Println(err)
} else {
  body, err := ioutil.ReadAll(res.Body)
  if err != nil {
    log.Println(err)
  } else {
    json.Unmarshal(body, &data)
  }
}

Finally, I passed the processed data to the template to render it. Below is the complete code for src/handlers/index.go file.

package handlers

import (
  "encoding/json"
  "go-cosmic-blog/src/domain"
  "go-cosmic-blog/src/utils"
  "io/ioutil"
  "log"
  "net/http"
  "os"
  "text/template"
)

// Index handler to serve / route
func Index(w http.ResponseWriter, r *http.Request) {

if ok := utils.CheckIfEnvExists("BUCKET_SLUG"); !ok {
  http.Error(w, "BUCKET_SLUG is not present in the .env", http.StatusInternalServerError)
  return
}

var readKey string
if ok := utils.CheckIfEnvExists("READ_KEY"); ok {
  readKey = "&read_key=" + os.Getenv("READ_KEY")
}

bucketSlug := os.Getenv("BUCKET_SLUG")

url := utils.APIURL + bucketSlug + "/objects?&hide_metafields=true&type=posts&props=slug,title,content,metadata,created_at" + readKey

res, err := http.Get(url)
var data domain.ObjectsData

if err != nil {
  log.Println(err)
} else {
  body, err := ioutil.ReadAll(res.Body)
  if err != nil {
    log.Println(err)
  } else {
    json.Unmarshal(body, &data)
  }
}

t, _ := template.ParseFiles(
  "src/templates/index.html",
  "src/templates/head.html",
  "src/templates/header.html",
  "src/templates/footer.html",
)

t.Execute(w, data)
}

Similarly, I created the Single Handler in src/handlers/single.go. You can copy code from here.

Now, our routes and controller part is complete. Let's move to render templates.

Templates

For rendering our templates, I used text/template which is easy and quite powerful as well. Furthermore, you can look at this Go Template Cheat Sheet for your understanding.

For better code structure, I divide the template into head, header and footer. Then index template is for index route and single template is for single post page. Below is the code of src/templates/index.html which is self-explanatory.

{{template "head"}}
{{template "header"}}
  <section class="container mx-auto px-4 py-12 max-w-5xl">
    {{if .Objects}}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 gap-y-12">
        {{range .Objects}}
        <article>
          <a href="/{{.Slug}}">
            <div class="h-64 sm:h-56 lg:h-48 rounded-sm bg-gray-500 bg-cover" style="background-image: url({{.Metadata.Hero.ImgixURL}}?w=400)">
            </div>
          </a>
          <h2 class="text-black text-lg font-semibold mt-2">
            <a href="/{{.Slug}}">{{ .Title }}</a>
          </h2>
          <p class="mt-2 text-gray-600">{{.Metadata.Description}}</p>
          <div class="mt-1"><time class="text-gray-400 font-semibold">{{.CreatedAt.Format "02 Jan 2006"}}</time></div>
        </article>
        {{end}}
      </div>
    {{else}}
      <h2>No post found</h2>
    {{end}}
  </section>
{{template "footer"}}

The rest of the templates you can check out here.

Styling

As you may already notice, I used classes in HTML templates for styling purposes. And these classes are from Tailwind CSS which is a modern CSS framework for building custom designs. In order to use Tailwind CSS in this application, I installed npm packages using this command

npm i -D tailwindcss cssnano postcss-cli

and then I created static/styles/tailwind.css file with the following content.

Note: you need to have node and npm installed for this

@tailwind base;
@tailwind components;
@tailwind utilities;

For markdown support, I copied Github Markdown Styles for tailwind into that file as well.

Together with postcss you can build Tailwind CSS and also remove all unused classes in production for the smaller size. You can look at postcss.config.js, tailwind.config.js and npm scripts in package.json in the code repository.

Finally, for development purposes I installed reflex which is a tool to detect code changes and run our go run app.go command (Note: reflex only works on macOS and Linux). You can install that using this command:

go get github.com/cespare/reflex

Voila, our blog application is ready. You can run npm start and go to http://localhost:8000 to access the application. It should look something like the screenshot below:

Deployment

At this point, the blog application is fully functional locally. But I wanted to deploy this to Heroku as it is very easy for deployments and it supports Go applications. As this repository is on GitHub, I thought to give GitHub Actions a try.

I looked around and found a very easy GitHub action for Heroku deployments here.

To set up it properly, we need to make sure our Go application has a go.mod file. Also, I need to add secrets in our GitHub repository settings i.e BUCKET_SLUG, HEROKU_API_KEY, HEROKU_APP_NAME, HEROKU_EMAIL, READ_KEY.

After that, I just needed to use actions/checkout@v2 to check out our repository and then trigger Heroku deploy. Below is the full code for our Github Action file .github/workflows/production.yml.

name: Production Deployment

on:
  push:
    branches: master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - name: Check out code
      uses: actions/checkout@v2
    - name: Deploy to Heroku
      uses: akhileshns/heroku-deploy@v3.4.6 # This is the action
      with:
        heroku_api_key: ${{secrets.HEROKU_API_KEY}}
        heroku_app_name: ${{secrets.HEROKU_APP_NAME}}
        heroku_email: ${{secrets.HEROKU_EMAIL}}
        branch: "master"
      env:
        HD_BUCKET_SLUG: ${{secrets.BUCKET_SLUG}}
        HD_READ_KEY: ${{secrets.READ_KEY}}

This will trigger the deployment on very commit in the master branch.

Conclusion

After this whole journey, I can confidently say that Go is a super simple and robust language to build your backend application. In addition, these are my takeaways:

Tailwind is the best CSS framework for building custom designs. It is very customizable.
It is very simple to add CI/CD to our application using GitHub Actions and it has very generous developer-friendly free tier.
Application deployments are very simple and easy with Heroku.

Hope you liked this article. If you have any comments or questions about building websites and apps with Cosmic, reach out to us on Twitter and join the conversation on Slack. You can also follow another step-by-step Go Guide in the Cosmic Docs.

Developer Spotlight: Lydia Hallie

Tony Spiro — Tue, 07 Jan 2020 15:52:55 +0000

In this episode of the Cosmic JS Developer Spotlight Series, we chatted with Lydia Hallie, software developer and active contributor on Dev.to. She has been getting a lot of attention for her easy-to-follow (and beautifully visual!) educational resources for JavaScript. Follow Lydia on Twitter, GitHub, LinkedIn, and enjoy the conversation.

When did you first begin building software?

I got introduced to the concept of “programming” when I was quite young, around 9 years old. I had no idea this was programming though, I just thought it was something fun you could do as a kid (I mainly built basic games in python!).

When I was around 13 I started blogging on Tumblr and developed my own layouts on there, that’s when I got introduced to HTML/CSS/JavaScript etc. I loved it, but I had no idea this could potentially be a future career option! (….I also used the inspector tools very often to try and change my grades on my school’s website haha. Little did I know that it did not in fact change the grades in the database, but I felt so cool when I found this feature in the browser. True hackerman moment.).

After graduating high school I got into it more seriously. I started playing around with Ruby on Rails, learned python for real, C#, and of course the love of my life JavaScript.

What is your preferred development stack?

I currently build most of my projects using TypeScript, React, Node, Serverless, GraphQL, and recently started with Golang which has been great so far!

What past projects are you most proud of and why?

Haha I always feel so bad when I’m not actively creating open source projects so I’m proud of things I created just to make my own life easier. Although I’m not “proud” of it, I always use a simple CLI tool I built to track my daily mood, how my motivation was that way, what I learned that day, and what I wish I’d done better. For some reason I’m always too lazy to write it down in a physical diary, but doing it through the terminal is so much easier. Tracking my personal progress this way has positively affected my life so much and it let me make connections between certain events and my mood/motivation that I couldn’t make myself through analyzing the data.

What are some technologies you are excited about or want to learn more about?

I really want to start building more with ReasonML. But I usually don’t really learn technologies just because it’s “new” and “trendy”, I learn them when they’re useful in a project I’m working on. I want to understand tools better that I’m currently taking for granted, like the internals of a browser, computer architecture, networking, cyber security, etc.

You are very active in the developer community with your educational content. Can you share some thoughts about why you think this is important?

“A teacher can make you or break you”, I’ve had so many horrible teachers in my life that totally ruined my interest for a certain subject, even though the subject turned out to be super interesting and fascinating. It’s the worst when you have a teacher that isn’t actually passionate about the subject and just leaves you confused. I noticed that people liked the way I explain things, and I love showing others how cool and fun programming can actually be. You can be so extremely creative in this field, anything is possible. That said, I could never just do this as my main thing, I’m still programming way more than creating educational content. But I have no hobbies besides coding so it’s the best way to spend my “free time” haha!

Where are your favorite places (online or offline) to go to learn more about emerging trends in technology and software development?

I learn about the latest things through either my network, conferences, or my Twitter feed. Sometimes I go to course websites like Pluralsight, but courses usually don’t really work for me, I can’t focus for long enough haha. I just get started with the new tool, build something with it, and if I run into issues I just reach out to the maintainer :)

The Cosmic JS Spotlight Series is dedicated to showcasing developers that are building apps using modern tools and contribute to the developer ecosystem. To contribute to Cosmic JS go to the contributor page. To stay connected with Cosmic JS and get the latest news about our headless CMS and community resources follow us on Twitter and join the conversation on Slack.

From WordPress to JAMstack: How to make your website 10x faster

Tony Spiro — Fri, 15 Feb 2019 19:02:00 +0000

Performance matters. If you are familiar with JAMstack, the movement encourages avoiding server-side rendering completely in favor of pre-build, purely static HTML pages. By serving only JavaScript, APIs, and Markdown (JAM) over a CDN, a website's performance is dramatically increased, making for a much better user experience.

If you have an existing WordPress website, you may be familiar with slow page load. This can be due to server-side processes that occur prior to even getting to the HTML. If you are looking to make the switch to a better experience for your users, it might be time to switch to a JAMstack website. And making the switch may be easier than you think.

In this tutorial we're going to import existing WordPress content into a JAMstack website, deploy to Netlify, then perform Lighthouse tests on the two versions to determine if there are any significant performance gains. (Hint: there are 😁)

TL;DR

Install the Gatsby Blog, a ready-made JAMstack website powered by Gatsby and the Cosmic JS Headless CMS.
Import existing WordPress posts into Cosmic JS using the WordPress Importer.
Deploy the Cosmic-powered website to Netlify.

Getting Started

First we'll need to install the Gatsby Blog available in the Cosmic JS Apps Marketplace.

After we install the app to a new Bucket, we'll need to install the WordPress Importer Extension. This can be found by navigating to Your Bucket > Settings > WordPress !Importer.

Follow the directions in the Extension to import your WordPress posts.

After importing your posts, you'll see that our Posts Object Type now includes the imported WordPress posts, that was easy! Now let's deploy this sucker.

Deploy 🚀

There are a few options to deploying our website located in Bucket > Settings > Deployment. We'll go ahead and deploy to Netlify since they've perfected the art of JAMstack hosting, plus they invented the JAMstack term to help us wrap our heads around the concept.

After we add our Gatsby Blog GitHub repo to Netlify, we'll need to set up our environment variables in Netlify to connect to Cosmic JS prior to deployment. Go to Sites Settings > Build and Deploy to add the environment variable COSMIC_BUCKET with the value set to your Bucket slug. If you set a read key in your Bucket settings, add that here also as COSMIC_READ_KEY.

Now go to the Deploys tab and Trigger deploy 🚀🚀🚀

Compare 🧐

Now that our new JAMstack website is deployed, let's compare performance between the old WordPress website and our new Cosmic-powered JAMstack site. Open the Chrome console and run the Lighthouse tests on each website. Check out the results below (though the design is different, the post count on the page is roughly the same).

WordPress TechCrunch
https://techcrunch.com

Gatsby, Cosmic, JAMstack TechCrunch
https://wordpress-to-cosmic.netlify.com

As you can see after running the Lighthouse tests our Cosmic-powered Gatsby JAMstack website blows the WordPress site away with a massive performance increase. And check out the transitions between pages on the JAMstack version, it's 🔥

Conclusion

I hope you enjoyed this tutorial on how we can build a dramatically faster web experience by moving from WordPress to a Cosmic JS-powered JAMstack website. Try it out for yourself and you may be surprised how easy it is to make the switch. Your users will thank you.

Join the conversation around API-driven content management, JAMstack and new web tech on Slack and reach out to Cosmic JS on Twitter.

This article was originally posted on the Cosmic JS learning center.

Forem: Tony Spiro

How to Migrate from Drupal to Cosmic

Why Teams Are Leaving Drupal Now

Drupal to Cosmic Concept Mapping

Step-by-Step Migration Guide

Step 1: Audit Your Drupal Content Model

Step 2: Create Your Cosmic Object Types

Step 3: Export Your Drupal Content

Step 4: Import Content to Cosmic via the REST API

Step 5: Migrate Media Files

Step 6: Set Up Webhooks and Rebuild Your Frontend

Step 7: Test, Redirect, and Go Live

Migration Checklist

What You Get on the Other Side

Build and deploy a Next.js ecommerce website in 5 steps

1. Install the Cosmic ecommerce Block

2. Configure Stripe

3. Install Stripe extension

4. Add products to Stripe

5. Deploy to your website hosting provider

Next steps

Best Practices using React Server Components with a Headless CMS

1. Install the template

2. Copy + paste the Tailwind UI page example

3. Separate the components

4. Add Cosmic power

5. Adding the global header

6. More pages

Conclusion

Links

4 Steps to Update the Next.js Marketplace Template

Getting started

Steps to Upgrade

1. Install the Cosmic JavaScript SDK

2. Bucket configuration

3. Object fetching

4. Adding Objects

Next steps

Migrate from WordPress to a headless CMS in 3 easy steps

TL;DR

WordPress fanboys need not apply

1. Create a new Cosmic project

2. Install the Extension

3. Migrate your content

Bonus points

Conclusion

Building a Blog with Go, Tailwind CSS, Cosmic & Deploy to Heroku with GitHub Actions

TL;DR

Fundamentals

Blog Data

Go App Code

Domain

Routes (Controllers)

Templates

Styling

Deployment

Conclusion

Developer Spotlight: Lydia Hallie

When did you first begin building software?

What is your preferred development stack?

What past projects are you most proud of and why?

What are some technologies you are excited about or want to learn more about?

You are very active in the developer community with your educational content. Can you share some thoughts about why you think this is important?

Where are your favorite places (online or offline) to go to learn more about emerging trends in technology and software development?

From WordPress to JAMstack: How to make your website 10x faster

TL;DR

Getting Started

Deploy 🚀

Compare 🧐

Conclusion