npm install to install /node_modules folder with all npm packages.
gridsome develop to start a local dev server at http://localhost:8080
Happy coding ๐๐
3. Get Strapi running
Navigate to xlaero-cms (or different project name) root directory via the Terminal.
Start Strapi Admin Tool: npm run develop.
4. Quering data from Strapi in Gridsome
Use the GraphQL Explorer by opening http://localhost:8080/___graphql. It is helpful to test the output of queries or mutations you want to make.
To query data from Strapi using GraphQL, use the prefixes strapi (single entry) and allStrapi (multiple entries). After that, add the API ID of the content type (e.g. service becomes strapiService).
Given, you want to query the single entry with the "id": 1 of the content type service, use:
query {
strapiService(id: 1) {
name
id
description
image {
url
}
}
}
Given, you want to query multiple/all entries of the content type service, use:
query {
allStrapiService {
edges {
node {
name
id
description
image {
url
}
}
}
}
}
โ ๏ธ Be aware that changing data in the Strapi admin requires to re-run gridsome (ctrl + c (Mac) and gridsome develop).
โจ Initial Setup Guide
1. Install Gridsome CLI tool if you don't have
npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-site to create a new project.
cd my-gridsome-site to open folder.
3. Get the project running
gridsome develop to start a local dev server at http://localhost:8080
4. Setup ESLint + AirBnB
โ ๏ธ For a better developing experience you can install ESLint VSCode Extension.
1.Follow the Getting Started Guide of ESLint to install and init ESLint locally.
2. Answer the questions as follows:
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:
eslint-plugin-react@^7.19.0 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 || ^1.7.0
? Would you like to install them now with npm? Yes
Now you should see file called .eslintrc.js in your root project folder.
Install Strapi and create a new project: npx create-strapi-app my-project --quickstart.
Complete the form to create the first Administrator user.
If you use GraphQL instead of REST (default), install the GraphQL plugin: npm run strapi install graphql. To test, use the GraphQL Playground under http://localhost:1337/graphql.
Restart your server: npm run develop.
Deployment
Use gridsome build to generate static files in a /dist folder