Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukaskoeller/gridsome-starter-strapi
Strapi Starter for Gridsome
https://github.com/lukaskoeller/gridsome-starter-strapi
graphql gridsome headless-cms netlify starter strapi vue
Last synced: about 2 months ago
JSON representation
Strapi Starter for Gridsome
- Host: GitHub
- URL: https://github.com/lukaskoeller/gridsome-starter-strapi
- Owner: lukaskoeller
- Created: 2020-06-02T07:30:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T23:25:25.000Z (about 2 years ago)
- Last Synced: 2023-03-21T23:40:42.144Z (almost 2 years ago)
- Topics: graphql, gridsome, headless-cms, netlify, starter, strapi, vue
- Language: Vue
- Homepage:
- Size: 17.5 MB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gridsome-starter-strapi
This is a Gridsome Starter using the headless CMS [Strapi](https://strapi.io). It is suppose to kick-start development with Strapi.
A **[Demo](https://gridsome-starter-strapi.netlify.com)** is hosted on Netlify.
Under the hood, the starter is using the source plugin [`@gridsome/source-strapi`](https://gridsome.org/plugins/@gridsome/source-strapi) to pull data from Strapi into Gridsome's data store.
Images provided by Strapi are downloaded and saved locally via `onCreateNode`. Thus, the build version includes all images in `/static`.
Rich text which is provided as markdown from Strapi is prepared via `onCreateNode` and transformed to html using [`@gridsome/transformer-remark`](https://gridsome.org/plugins/@gridsome/transformer-remark).
## Strapi Setup
*Note: Steps that are marked with a check are already done and are just necessary if you set up a completely new project.*
1. ✅ Install the [@gridsome/source-strapi](https://gridsome.org/plugins/@gridsome/source-strapi) Plugin: `npm install @gridsome/source-strapi --save`
2. ✅ Add it to the config file:
```
export default {
plugins: [
{
use: '@gridsome/source-strapi',
options: {
apiURL: 'http://localhost:1337',
queryLimit: 1000, // Defaults to 100
contentTypes: ['post'],
// Possibility to login with a Strapi user,
// when content types are not publicly available (optional).
loginData: {
identifier: '',
password: ''
}
}
}
]
}
```
3. Install Strapi by following the [Get Started Guide](https://strapi.io/documentation/v3.x/getting-started/quick-start.html).
4. Install Strapi and create a new project: `npx create-strapi-app gridsome-starter-strapi-cms --quickstart`.
5. Complete the form to create the first Administrator user.
6. Since we are using GraphQL, install the GraphQL plugin: `npm run strapi install graphql`. Open the GraphQL Playground ([http://localhost:1337/graphql](http://localhost:1337/graphql)) to test your queries.
7. Restart your server: `npm run develop`.
### Create Posts
1. In the Strapi Admin Interface you can now add Content Types (`Plugins` > `Content-Types Builder` > `Create new collection type`).
2. Name you new collection type `Post`.
3. Now, add 4 fields, namely `title` (text), `subtitle` (text), `article` (rich text) and `image` (single media).
4. Click on `Save` & `Publish`.
5. Add blog entries by clicking on `Collection Types` > `Posts` > `Add New Post`.
6. Go to `Settings` > `Roles` under `USERS & PERMISSIONS PLUGIN`. Click on the column saying `Public`. Put a check on `find` and `findOne` under `Post`. Click on `Save`.
7. ✅ In `gridsome.config.js` add `post` (API ID) under `contentTypes`.
### Create About
1. In the Strapi Admin Interface you can now add Content Types (`Plugins` > `Content-Types Builder` > `Create new single type`).
2. Name you new collection type `About`.
3. Now, add 2 fields, namely `title` (text) and `article` (rich text).
4. Click on `Save` & `Publish`.
5. Add content to the about page by clicking on `Single Types` > `About`.
6. Go to `Settings` > `Roles` under `USERS & PERMISSIONS PLUGIN`. Click on the column saying `Public`. Put a check on `find` under `About`. Click on `Save`.
7. ✅ In `gridsome.config.js` add `about` (API ID) under `singleTypes`.
## Gridsome Setup
### 1. Install Gridsome CLI tool if you don't have
`npm install --global @gridsome/cli`
### 2. Create a Gridsome project
1. ✅ `gridsome create gridsome-starter-strapi` to install default starter
2. ✅ `cd gridsome-starter-strapi` to open the folder
3. `gridsome develop` to start a local dev server at `http://localhost:8080`
4. Happy coding 🎉🙌
## 🐛 Debugging
* Since we are working with GraphQL, the [GraphQL explorer](https://gridsome.org/docs/data-layer/#the-graphql-explorer) can be very helpful. You can open it through `http://localhost:8080/___explore`.
## Troubleshooting
* If you get `TypeError: gridsome.server.js: Cannot read property 'allStrapiPost' of undefined (31:10)` as an error after starting the gridsome development server, you likely forgot to create and/or **publish** your post in Strapi under `Collection Types` > `Posts`.
## 💫 Deploy
[](https://app.netlify.com/start/deploy?repository=https://github.com/lukaskoeller/gridsome-starter-strapi)