Skip to content

Thisisjuke/nextjs-13-storyblok-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NextJS 13 - Storyblok Starter

Front-end result StoryBlok CMS View Step by Step setup Tutorial

[NEW] Here comes the Step-by-Step setup Storyblok starter tutorial 🤩✍️ !

Find a relative Medium blogpost here: https://medium.com/@liegearthur/nextjs-13-manage-your-content-using-storyblok-cms-a-clean-repository-starter-1362b9db303f

⚠ Disclaimer :

What's inside the box ?

  • Demo pages with Header / Footer / HeadingBlok / TestimonialsSlider / SEO, managed by Storyblok CMS.
  • Storyblok setup with custom Bridge.
  • pages/[[...slug]].tsx file that handles all pages of your application: all Page ressources in Pages directory on the CMS will generate a new NextJS page.
  • Handle 404 and 500 errors with design coming from CMS, based on : NextJS Doc - Handling Server Errors.
  • Auto generated sitemap.xml after each build.
  • .gitlab-ci.yml to deploy your App + your Storybook on Netlify from self-hosted Gitlab.
  • TypeScript: CMS types are auto-generated, and used on components/blocks/. Components are typed.
  • TailwindCSS basic setup.
  • Simple atomic design inside components/lib/ with few components based on TailwindUI.
  • Storybook setup with next/image and next/router mocks. All components have their own story.
  • A Frog friendly interface 🐸

⚠ Many of things you will see in this repository are opinionated: feel free to change anything!

Command cheat sheet

  • yarn dev: Start the app on localhost:3000 and the https proxy on https://localhost:3010.
  • yarn storybook: Start storybook to see the stories of your components.
  • yarn build: Build your application using default NextJS build.
  • yarn start: Start the last build you have done (production mode).
  • yarn lint:fix: Clean your code using eslint.
  • yarn storyblok-pull-components: Update the local schema of your components: used to generate TypeScript types.
  • yarn storyblok-generate-types: Generate TypeScript type

External dependencies

Storyblok asks for a https certificat to ensure that the bridge can connect and that you can preview your website in Storyblok CMS.

You NEED to have HTTPS Proxy Certificates at the root of your project:

# HTTPS Proxy certificates
localhost.pem
localhost-key.pem

I used mkcert to generate my .pem files, following this tutorial (also working on Linux): Setting up Dev Server with HTTPS Proxy On Windows

These are used inside package.json to start the dev on port :3000 and an SSL proxy on port :3010.

"start-ssl": "local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem",

⚠ Disclaimer : Here local-ssl-proxy is installed globally.

Feel free to replace mkcert and local-ssl-proxy by any package you want !

Getting started

⚠ Your application will not start without a simple setup inside StoryBlok CMS. Check there how to do it: Documentation : How to set up your StoryBlok CMS.

Clone and fill .env.local file (see Environnement variable section):

cp .env.example .env.local

Install dependencies

yarn

Modify references to your Storyblok Workspace:

package.json:

"storyblok-pull-components": "storyblok pull-components --space=XXXXXX",
"storyblok-push-components": "storyblok push-components ./components.XXXXXX.json --space=XXXXXX",
"storyblok-generate-types": "storyblok-generate-ts source=./components.XXXXXX.json target=./types/storyblok-types",

And also these files name:

./components.XXXXXX.json
./presets.XXXXXX.json

Push the schemas for Header / Footer / HeadingBlok / TestimonialsSlider / SEO (it will ask for email/password):

storyblok-push-components

If you encounter an issue with your StoryBlok (like a timeout or a refused access), try this command:

npx storyblok logout

Now, you can start to modify things on StoryBlok CMS. Each time you want to regenerate the TypeScript to be in sync with your CMS, do:

yarn storyblok-pull-components
yarn storyblok-generate-types

⚠ Warning : Last recommendation to check Storyblok Official Tutorial : NextJS.

How to set up things on your StoryBlok CMS ?

There is a full illustrated tutorial here: How to init Storyblok CMS to work with "NextJS 13 - Story Blok Starter"

There is also a dedicated README.md that explains what you need to do on the CMS starting this point!

You can find it here: Documentation : How to set up your StoryBlok CMS

I am stuck in the code, can you help me ?

There is a dedicated documentation TECH.md that explains some not obvious things about this repository (FAQ).

You can find it here: Documentation : Hint and Tips about not obvious things

Environnement variable

Name Description Example
REACT_STORYBLOK_ACCESS_TOKEN API key from storyblok dashboard (Settings / Access Tokens). b373-ed708fab45f4
STORYBLOK_SECRET_TOKEN Your custom key used in api/revalidate to check if the webhook is coming from storyblok (Settings / Webhooks). IZtrIZ3_D2bl1isr2gtt
ENV_BASE_URL Domain name to generate the right sitemap.xml acme.com
PREVIEW_SECRET_TOKEN Your custom key used in api/preview to check if user is authorized to preview. fd27e842-8e70

How to get your API key: Create / Get an API key.

Deploy

This repository can be easily deployed on Vercel and Netlify if you git repository is on GitHub or on the public Gitlab : These 2 providers can be connected directly to your git repository: you will not need any configuration in .gitlab-ci.yml.

Additional variables to add to your CI to deploy on Netlify (self-hosted Gitlab):

Name Description Example
NETLIFY_AUTH_TOKEN Authentication token given on Netlify. 8fd27e8sr2gt1rIZ
NETLIFY_DEV_SITE_ID Site ID of your app (that you can find after creating a site inside Netlify). 0348535
NETLIFY_STORYBOOK_SITE_ID Site ID of your Storybook (that you can find after creating a site inside Netlify). 0348535

Resources

About

NextJS 13 + Storyblok CMS 🐸 TypeScript ✅ TailwindCSS🍃 Storybook 📚

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published