https://github.com/builderio/gatsby-starter-builder
Gatsby example with drag and drop page building
https://github.com/builderio/gatsby-starter-builder
cms drag-drop gatsby headless page-builder react wysiwyg
Last synced: 5 months ago
JSON representation
Gatsby example with drag and drop page building
- Host: GitHub
- URL: https://github.com/builderio/gatsby-starter-builder
- Owner: BuilderIO
- License: mit
- Archived: true
- Created: 2020-03-26T18:03:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-15T19:03:23.000Z (over 2 years ago)
- Last Synced: 2025-06-05T19:08:51.061Z (7 months ago)
- Topics: cms, drag-drop, gatsby, headless, page-builder, react, wysiwyg
- Language: JavaScript
- Homepage: https://builder.io
- Size: 8.83 MB
- Stars: 72
- Watchers: 4
- Forks: 39
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Builder.io Gatsby Example
Gatsby starter with drag + drop page building with your React components via Builder.io's visual headless CMS
## Quick Start
1. **Sign up at Builder.io and Create a Gatsby site.**
- Clone this repository or use `gatsby new`
```shell
# create a new Gatsby site using this starter
gatsby new my-builder-site https://github.com/BuilderIO/gatsby-starter-builder
```
- Grab a free account at [builder.io](https://builder.io/signup) and create a new space. Then return to this page and follow this [link](https://builder.io/fork-sample-org) to get set up with all the models used in this starter and some sample content to get you started.
- In Builder.io, click on the Account icon on the left sidenav.
- Change the Site URL to `http://localhost:8000` and copy the [Public API Key](https://builder.io/account/space).
- In your code editor, add the Public API Key you just copied to [src/config.js](src/config.js)
```shell
builderAPIKey: '59bb518773c14842921abe05d5e2bee3' <-- replace this with your API Key
```
2. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
cd my-default-starter/
gatsby develop
```
Then start building pages in Builder! Use the pre-built templates, and components to create exactly what you want. This starter uses [@builder.io/gatsby plugin](https://github.com/BuilderIO/builder/tree/master/packages/gatsby) to fetch all your published pages and add them to your Gatsby build.
3. **Deploy.**
[](https://app.netlify.com/start/deploy?repository=https://github.com/BuilderIO/gatsby-starter-builder)
For continuous deployment from netlify <> Builder.io :
- Create a [build hook](https://docs.netlify.com/configure-builds/build-hooks/) in netlify
- Add the build hook from last step to Builder.io global webhooks in your new [space settings](https://builder.io/account/space).
## 🧐 What's inside?
This starter demonstrates creating dynamic pages in Builder.io on new URLs and generating them with Gatsby, as well as rendering specific parts of your site with Builder.io content via GraphQL queries (e.g. for pages, header, footer, etc)
See:
- [src/templates/LandingPage.jsx](src/templates/LandingPage.jsx) for using GraphQL to query and render Builder.io components and pages manually in parts of your Gatsby site and content
- [src/layouts/PageLayout.jsx](src/layouts/PageLayout.jsx) for an example on wrapping your pages with content from `header` and `footer` model entries.
- [@builder.io/gatsby](https://github.com/builderio/builder/tree/master/packages/gatsby) the plugin used in this starter to generate pages dynamically.
### Using your custom components in the editor
> 👉**Tip: want to limit page building to only your components? Try [components only mode](https://builder.io/c/docs/guides/components-only-mode)**
Register a component
```tsx
import { Builder } from '@builder.io/react';
class SimpleText extends React.Component {
render() {
return
{this.props.text}
;
}
}
Builder.registerComponent(SimpleText, {
name: 'Simple Text',
inputs: [{ name: 'text', type: 'string' }]
});
```
Then import it in the template or in your [builder-settings.js](src/builder-settings.js)
```tsx
import './components/simple-text';
// ...
```
See:
- [src/components/Hero/hero.builder.js](src/components/Hero/hero.builder.js) for an example of using a custom react component in the Builder.io visiaul editor.
- [design systems example](https://github.com/BuilderIO/builder/tree/master/examples/react-design-system) for lots of examples using your deisgn system + custom components
### Mixed Content errors when hosting on insecure http
Our editor uses the preview URL you supply for live editing. Because the editor is on `https`, the preview might not work correctly if your development setup uses http. To fix this, change your development set up to serve using https. Or, as a workaround, on Chrome you can allow insecure content on localhost, by toggling the `insecure content` option here [chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A9009](chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A8000)
## Prerequisites
- Node
- [Gatsby CLI](https://www.gatsbyjs.org/docs/)
## Available scripts
### `build`
Build the static files into the `public` folder
#### Usage
```sh
$ npm run build
```
### `clean`
Runs `gatsby clean` command.
#### Usage
```sh
npm run clean
```
### `develop` or `start`
Runs the `clean` script and starts the gatsby develop server using the command `gatsby develop`.
#### Usage
```sh
npm run develop
```
### `format`
Formats code and docs according to our style guidelines using `prettier`
#### Usage
```sh
npm run format
```
## CONTRIBUTING
Contributions are always welcome, no matter how large or small.
## Learn more
- [Official docs](https://www.builder.io/c/docs/getting-started)
## Gatsby starters and resources:
| Resource | description |
| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| [@Builder.io/gatsby plugin](https://github.com/BuilderIO/builder/tree/master/packages/gatsby) | Plugin for sourcing content from Builder.io to Gatsby |
| [Minimal starter](https://github.com/BuilderIO/builder/tree/master/examples/gatsby-minimal-starter) | Example of using Builder.io to build landing pages in Gatsby |
| [Headless Shopify Store](https://github.com/BuilderIO/gatsby-builder-shopify) | Starter kit for building headless shopify storefronts with GatsbyJS and Builder.io [Demo](https://builder-shopify-starter.firebaseapp.com/) |