Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rishi-raj-jain/next-storyblok-edgio-starter
Deploy Next SPA with Storyblok to Edgio
https://github.com/rishi-raj-jain/next-storyblok-edgio-starter
boilerplate caching edgio layer0 nextjs serverless storyblok
Last synced: 25 days ago
JSON representation
Deploy Next SPA with Storyblok to Edgio
- Host: GitHub
- URL: https://github.com/rishi-raj-jain/next-storyblok-edgio-starter
- Owner: rishi-raj-jain
- Created: 2021-07-01T14:09:03.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T11:42:24.000Z (almost 2 years ago)
- Last Synced: 2024-10-08T03:29:37.848Z (about 1 month ago)
- Topics: boilerplate, caching, edgio, layer0, nextjs, serverless, storyblok
- Language: JavaScript
- Homepage: https://rishi-raj-jain-next-react-storyblok-boilerplate-default.layer0-limelight.link/home
- Size: 434 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Storyblok Edgio Boilerplate
This repository is a [Next.js](https://nextjs.org) [Storyblok](https://www.storyblok.com) [Edgio](https://edg.io) starter template used in following [guide](https://www.storyblok.com/tp/).
## Requirements
To use this project you have to have a Storyblok and Edgio account. If you don't have one yet you can register at [Storyblok](https://www.storyblok.com) and [Edgio](https://app.layer0.co), both are free!
## How to get started?
Read the [Next.js tutorial](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes) about connecting Storyblok and Next.js
### 1. Clone the repo
```bash
git clone https://github.com/rishi-raj-jain/next-storyblok-edgio-starter.git
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Adding the Access token
Create a new empty Space and exchange the preview token with your own in `lib/storyblok.js`.
```js
// in lib/storyblok.js
const Storyblok = new StoryblokClient({
accessToken: "your-preview-token", // process.env.STORYBLOK_API_TOKEN (refer to .env.example)
cache: {
clear: "auto",
type: "memory",
},
});
```
### 4. Run your project
Set the preview domain in Storyblok to `http://localhost:3000/`
```bash
npm run dev
```
### 5. Install Edgio CLI
```bash
npm i -g @edgio/cli
edgio init
```
### 5. Run a production build of your app and test it locally
```bash
edgio build && edgio run --production
```
### 6. Deploy to Edgio
```bash
edgio deploy
```
### 7. (Optional) Add Environment Variables on Edgio Console
Follow [this section](https://www.storyblok.com/tp/#) of guide to add STORYBLOK_API_TOKEN and EDGIO_DEPLOY_TOKEN for integrating it with GitHub Workflows.
## Resources
- [Next.js docs](https://nextjs.org/docs/#setup)
- [Storyblok Tutorial](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes)
- [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)
- [Edgio Deploy Guide](https://docs.edg.io/guides/deploying)