Forem: Davide Panelli

Generating static sites with Svelte and a headless cms

Davide Panelli — Thu, 07 May 2020 09:38:05 +0000

JAMStack is becoming more and more popular because it's easy to scale and manage for devops and always offers optimal performances for end-users. There are a lot of native options to generate static websites, like GatsbyJS or the new features introduced in NextJS(check out how to create static sites with NextJs). Today we want to explore how to add headless cms to a Svelte app and how we can generate a static version of it.

Setting up

To get started, you need to have nodejs( >= 10), git installed, and an active account of ContentChef.(You can start a free 30-day trial here)
ContentChef is the headless cms that we are going to use in this example, and of course, the same concepts apply to any headless cms or external API to fetch data.
For this tutorial, we will need the spaceID and the online API key that you can easily find and note down in the dashboard home, as you can see below.

Starting the example Svelte application

For this mini-tutorial, we'll use the Svelte Starter provided with ContentChef, and we begin by cloning the repo and installing all the dependencies.

    git clone git@github.com:ContentChef/svelte-starter.git
    cd svelte-starter
    npm install

This starter is a Sapper starter app (learn more about Sapper here), where we added a couple of pages.
Let's explore the starter.
Open the ./src/contentChef.js file to create and configure the ContentChef client ( from the JS/Typescript SDK ) by adding our spaceID and online API key noted down before.

import { configure } from '@contentchef/contentchef-node';

const client = configure({
    spaceId: '<YOUR_SPACEID>'
});

export const onlineChannel = client.onlineChannel('<YOUR_ONLINE_API_KEY>', 'example-ch');

Let's start it up with:

npm run dev

Now open up your browser at https://localhost:3000/sites, and you should see something like this:

Great! It's working correctly!
This is also a server-side rendered svelte app.
Just open up the src/routes/sites/index.svelte file to see how simple is the integration with ContentChef.

<script context="module">
    import {onlineChannel} from '../../contentChef.js';
    export async function preload(page, session) {
        const response = await onlineChannel.search({contentDefinition: 'top-site', skip: 0, take: 100});
        return { sites: response.data.items };
    }
</script>

<script>
    import Card from '../../components/Card.svelte';
    import {getImageUrl} from '../../contentChef.js';
    export let sites;
</script>

<style>
    h1, figure {
        text-align: center;
        margin: 0 auto;
    }
    h1 {
        font-size: 2.8em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0.5em 0;
    }
    figure {
        margin: 0 0 1em 0;
    }
    @media (min-width: 480px) {
        h1 {
            font-size: 4em;
        }
    }
</style>

<svelte:head>
    <title>Sites from ContentChef</title>
</svelte:head>

<h1>Sites</h1>

<figure>
    {#each sites as site}
        <a rel="prefetch" href="/sites/{site.publicId}">
            <Card thumbnail={getImageUrl(site.payload.image)} title={site.payload.title} url={site.payload.url} description={site.payload.description} />
        </a>
    {/each}
</figure>

As you can see, the list of sites is fetched from the cms delivery API, and there's also a detail page for each item, and therefore, the number of pages of this example site is dictated by the cms contents and not statically configured in the app.

But now we want to make this static, not only server side rendered!
How can we staticize it , if we don't know the number and paths of pages upfront?

Making it static

Here's wehere the magic of Sapper will help us.
What we have to do? Well... basically nothing!
Sapper allows you to export a static site with a single zero-config sapper export command.
When you run sapper export, Sapper begins with a build of a production version of your app, as you had run sapper build, and copies the contents of your static folder to the destination. It then starts the server, and navigates to the root of your app. From there, it follows any <a> elements it finds, and captures any data served by the app.
Yes it basically crawl your app and generate static html from it!

Let's see it in action:

npx sapper export

Whoa! That was easy! And as we can see from the console output all the pages and subpages have been crawled and generated.
And then serve it with:

npx serve __sapper__/export

You are done!

We have seen how it's straightforward to generate a static version of your svelte + sapper websites, and it's also effortless to manage content with headless cms like ContentChef.
If you liked the article please share it with some fellow who might enjoy it too!

The advantages of a Headless CMS for 2020

Davide Panelli — Wed, 29 Apr 2020 11:04:13 +0000

Are you planning to leverage a new system for managing your digital content in 2020? If so, be sure to check out headless CMSs!
These systems are a great help for your content management efforts and aid you in distributing quality content across all of your digital channels effortlessly.
Let's find out what benefits you can expect from the best headless CMSs for 2020.

What is a headless CMS?

Before we delve into the advantages of using a headless CMS, let's first talk about what headless or decoupled content management is.
If you look at more traditional CMS like WordPress, you can see that its back-end is directly connected with the front-end of your website. With a headless CMS, you are usually free to choose how you want to build your UI since the front-end is decoupled from the back-end.
You enter content in a secured admin interface and store it in a central content repository from which developers access content via an API.
This allows you to display content on any channel, be it your website, e-commerce site, or native app.

Now that we've clarified what a headless CMS is, we can discover its benefits – especially for 2020 and the years to come!
How can your business benefit from a headless CMS?

Shorten time-to-market

A headless CMS enables you to release new features or entirely new apps and websites in less time. One reason is that you typically use APIs to retrieve content from your CMS, saving you the time of building things within the restrictions of a more traditional system. Besides, you can quickly redesign and add new features to your products the way you see fit.
In 2020, the market for digital products will continue to grow, and companies will strive to be more innovative and progressive than the competition. A decoupled CMS lets you act fast in this ever-changing technical landscape and offer high-quality digital experiences to your customers.

Create multi-channel experiences

With all the different devices that users can use to experience your digital product, it is becoming increasingly important to deliver customized experiences of the same content. Using a headless CMS, you only need to create content once and then distribute it to all your connected channels. These channels can be anything, be it your blog, e-commerce site, native app, or IoT device.
So if you plan to offer your service or product on new devices in 2020, a headless CMS will help you lay the perfect foundation. Simply connect a new channel to your content management system and start building!

Provide users with tailor-made products

Naturally, every device and type of digital product has different requirements regarding looks and functionality. Hence, it's of utmost importance to provide your users and customers with UIs that fit the medium perfectly, increasing satisfaction and trust in your brand. As you already know, trends come and go quickly – especially in the technology industry. With a headless CMS, you stay flexible enough to react to changes, experiment with new tech, and make your business keep pace.

What advantages can developers expect from headless CMSs in 2020?

Focus on programming

You probably have a pretty solid idea of what a perfect day as a front-end developer should look like. Working on an app's UI and then being disrupted by some CMS problems is most likely not part of this vision. Fortunately, with a headless CMS, you can spend your valuable time creating UIs hassle-free, without worrying about the limitations of a content management system.
When you switch to a headless CMS in 2020, you can finally try out all the new technologies and experiment in a safe and open environment. Program as you see fit, and always work with real and accurate data from your headless CMS.

Create UIs using your favorite front-end stack

Since you use APIs to retrieve content from a headless CMS, you can usually work with your beloved and proven front-end stack. Many headless CMSs also offer SDKs for various programming languages, which make working with the system even more straightforward. As a result, you don't need to learn a CMS-specific template language or use frameworks that you don't know or like. Also, if you want to try a new front-end framework or library in 2020, a headless CMS won't stop you!

Get things done faster

Continually releasing new features and bug fixes is essential for your business to stay relevant to the market. As discussed above, a headless CMS can help you reduce time-to-market times by stripping away the complexity of more traditional content management systems. Another great advantage of headless CMSs is that you and your entire team can work with real and accurate data in all development environments right from the start. As a result, you don't have to rely on hardcoded dummy data during development and always see what your user interface will look like for your users.

Advantages of a headless CMS for designers in 2020

Focus on designing

Designers shouldn't have to worry about the CMS used and its restrictions. Therefore, a headless CMS is a perfect opportunity to take that burden off the shoulders of design experts. Get creative and think outside the box to come up with new and innovative ways to provide users with great experiences. In this way, your company can take a leading role in the market and deliver valuable products and services to your customers in 2020 – and in the years to come.

Improve collaboration with developers

The digital products we develop today require designers and developers to work closely together. Only then can companies publish the best digital solutions in terms of appearance and functionality. Both parties have valuable insights and expertise to share with one another that can take your products to the next level. A headless CMS relieves most of the operational burdens of conventional systems and gives you more time and freedom to innovate, design, and build with new technologies in 2020.

ContentChef helps you achieve your content goals in 2020

A headless CMS can help you in several ways, whether you are a business stakeholder, developer, or designer.
If you want to distribute content to multiple channels and release tailored digital experiences, our headless CMS may just be what you're looking for.
Why not give ContentChef a try? We invite you to sign up for a 30-day trial and see for yourself how you can benefit from a headless CMS.

Static site generation with NextJs and a headless CMS

Davide Panelli — Tue, 21 Apr 2020 14:09:44 +0000

In this article, we will briefly explore the difference between server-side rendering(SSR) and static site generation(SSG) and implement both of them in a simple NextJS application fetching data from a Headless CMS.

What and why use SSR or SSG

Modern websites to always stay performant for users and search engines are employing SSR or SSG techniques.
NextJS is a great React framework to implement both of them quickly and straightforwardly, and we will use it to achieve them. But first, explore the differences between them and some pros and cons.

SSR-enabled pages are generated runtime on the server at each user request(if not cached in someway!).Instead, SSG pages are created at build time and served to the users.

The main advantages of SSR pages are that the content is always up-to-date, and there is no need to trigger a rebuild and redeploy of the website when some content changes in the CMS. The downside is that each request executes server-side code to create the HTML by fetching content from the cms Delivery API; this, of course, creates a slower response for the users.

With SSG, all the pages are pre-generated at build-time. So they can easily be distributed through CDN, creating the fastest possible experience for the users and also making Google happy for SEO purposes. The main drawback is that each time content changes in the CMS, a new build it's needed to make content live, and this may be suboptimal if your website needs constant changes!

Setting up a example application with NextJS and Headless CMS support

To complete this mini-tutorial, you will need git and Nodejs ( v10.13 or above) installed and working in your machine and a trial account of ContentChef, the headless CMS that we are going to use in these examples.

Let's start by cloning the repo of our NextJS starter and installing all the dependencies.

git clone git@github.com:ContentChef/nextjs-starter.git
cd nextjs-starer
npm install

This is a brand-new NextJs application with the ContentChef SDK installed, as we will use to fetch content from the headless CMS API.

It's a simple website that displays a list of websites and a detail page for each of them.All the sample data are pre-loaded on ContentChef account so you don't have to do nothing about that.

Get your SpaceID and Online API key from the dashboard. You will find them on the homepage of the dashboard like in the screenshot below

Now let's open the file ./services/contentChefClient.js and fill the pieces of information.


import ContentChefClient, { createUrl } from '@contentchef/contentchef-node';

class ContentChef {
  client;
  targetDate;
  defaultChannel = 'example-ch';
  onlineChannel;

  constructor() {
    this.client = ContentChefClient({
      spaceId: 'your-contentChef-spaceId',
    }, this.targetDate);
    this.onlineChannel = this.client.onlineChannel('your-contentChef-api-key', this.defaultChannel);
  }

}

Try the application to be sure that everything is in place by running:

npm run dev

Open the browser and head to http://localhost:3000, and you should see the list of the websites, and by clicking on one of them, you will access to the detail of that website.

Great, this simple app has already SSR enabled!
In fact, NextJS makes it extremely easy to create applications with SSR because you just need to export a function named getServerSideProps to instruct the framework that you want a page to be server-side rendered.
This is the example of the list page where we load the contents from the CMS in a very straightforward way:

import React from 'react';
import { contentChef } from '../services/contentChefClient'
import { Card } from "../components/card";
import Layout from "../components/layout";
import Link from "next/link";

const Home = ({ topSites }) => (
  <Layout
    title={'ContentChef Top Sites'}
  >
    <div>
      <h1 className="title">
        Welcome to <a href="https://contentchef.io">ContentChef!</a> + <a href="https://nextjs.org">Next.js</a> tutorial
      </h1>
      <p className="description">
        Top Sites
      </p>
    </div>

    <div style={{ width: "80%" }}>
      {topSites.map((site, index) => (
        <Link
          key={`top-site-${index}`}
          href={'/top-site/[publicId]'}
          as={`/top-site/${site.publicId}`}
        >
          <a style={{ textDecoration: 'initial' }}>
            <Card
              key={`top-site-${index}`}
              image={contentChef.getImageUrl(site.payload.image)}
              title={site.payload.title}
              description={site.payload.description}
              url={site.payload.url}
            />
          </a>
        </Link>
      ))}
    </div>
  </Layout>
);

//With this function we instruct Next to use SSR for this page!
export async function getServerSideProps() {
  const result = await contentChef.searchContents();
  return {
    props: { topSites: result }
  }
}

export default Home

Enable SSG for static routes

Now let's change the code to generate a static version of the same website!

We will start from the list page, which will be fairly easy. To instruct the framework to generate the page at build time, you need to export a function named getStaticProps, and that's all!

So let's change the code accordingly in the index page above.

//SSR version
export async function getServerSideProps() {
  const result = await contentChef.searchContents();
  return {
    props: { topSites: result }
  }
}

//And Just rename it!
export async function getStaticProps() {
  const result = await contentChef.searchContents();
  return {
    props: { topSites: result }
  }
}

And now verify that's working with a build.

npm run build

And let's look the output in console:

Tada! The home page list is now static!
But we have not finished yet. We want to create a static version of all the pages, including the detail pages, but now we see they're deployed as a lambda.

Enable SSG for dynamic routes

This step's a little bit trickier because we need to deal with the dynamic nature of the number of pages that we want to generate from our headless CMS, one for each website detail page.
To do that, we need to implement the getStaticProps function for the single page and also add a getStaticPaths function to tell to NextJs the paths we want to be generated.
Let's see the code to implement in ./pages/top-site/[publicId].js file by opening it and removing the old getServerSideProps.

We start by defining the getStaticPaths function, to read the list of contents PublicIDs from the Delivery API and creates a list of "Paths" to be processed.

export async function getStaticPaths() {
  const sites = await contentChef.searchContents();
  const publicIds = sites.map(site => site.publicId);
  const paths = publicIds.map(publicId =>{
    return {params:{ publicId:publicId } }
  });
  return {
    paths:paths,
    fallback: false
  };
}

Now, adding the getStaticProps function is pretty straightforward and similar to the one used for the list, we just need a content PublicID to fetch it from ContentChef.

export async function getStaticProps({ params }) {
  const result = await contentChef.getContent(params.publicId);
  return {
    props: {
      topSite: result.payload,
      cloudName: result.requestContext.cloudName
    }
  }
}

Let's try it by regenerating it:

npm run build
npm run start

And check again the console output:

Yahoo! All the pages are now static and you can browse them at http://localhost:3000

Triggering builds on a CI/CD pipeline

As you can see, generating SSR or SSG sites with next and a Headless CMS like ContentChef is fast and straightforward. With ContentChef, you can also easily add webhooks, so when you publish new content is easy to trigger a rebuild and redeploy of your site on CI/CD.

Why not give ContentChef and NextJS a try? Experience the benefits of a headless CMS for SSR and SSG for yourself!