gatsby-plugin-nebo v0.1.3
gastby-plugin-nebo
A Gatsby plugin that sources data from Nebo, the visual React builder.
This plugin builds the pages you created in Nebo.
Table of Contents
Install
Sign up for Nebo. After you've signed in, navigate to "Settings" on the side bar.
Install
gatsby-plugin-nebo
:
# if you are using npm and package-lock.json
npm install gatsby-plugin-nebo
# if you are using yarn and yarn.lock
yarn add gatsby-plugin-nebo
- Find and copy the access token. You can find it in the "Developers" section:
- Run the following command:
# with npm
npx nebo init --access-token=your-access-token
# with yarn
yarn run nebo init --access-token=your-access-token
- Add your plugin configuration to
gatsby-config.js
. It should look something like this:
{
"resolve": "gatsby-plugin-nebo",
"options": {
"accessToken": "[YOUR ACCESS TOKEN]",
"pageTemplatePath": "./NeboPage.jsx"
}
}
This will generate three files:
nebo.config.js
,nebo.js
, andNeboPage.jsx
. We'll use the first to import components, the second output Nebo assets for use in settings, and the third is the layout of pages coming from Nebo.You're now ready to build pages in Nebo!
Installing the plugin generates the configuration (./src/config/nebo-config.js
) and the page template (./src/templates/nebo-page.js
).
If you have filled in your access token in gatsby-config.js
, it will automatically be added to the configuration.
How to use
Adding pages
- Navigate to your Nebo home page.
Click "New Page".
Once you're in the editor, click on the gear icon in the top right to go to page settings.
- Here, you can change the name and slug of your page. The slug will be part of the url of the page in the format:
[YOUR_DOMAIN]/[SLUG]
. For example, for the slughello_world
will create a page athttps://nebohq.com/hello_world
. - Now, click on the top component on the right. If you named your page
Hello, world!
, it will be calledHello, world!
.
- Here you, can edit the page in any way you want. For the sake of this example, we added "This is a test page!" as the content of this page. You can find more information on how to use the editor here.
- Save your work by clicking the cloud button on the top right.
- Once you reload your development server (
npm run develop
) or redeploy, the page will now be available in your Gatsby app.
Adding your styles
Go to
nebo.config.js
.Change the
globalStylesPath
option to point to your global styles.
module.exports = {
// other options
globalStylesPath: ["./src/stylesheets/application.scss", "./src/stylesheets/globals.css"],
};
- Run the following command to compile your Nebo assets. This will build two files
nebo.css
andnebo.js
. It will also keep track as you change files.
# with npm
npx nebo watch
# with yarn
yarn run nebo watch
On the Nebo website, navigate to "Developer" settings in the Nebo App. Add
[YOUR_DEVELOPMENT_URL]/nebo.css
(usually something likelocalhost:3000/nebo.css
) to "CSS Source URL".Your styles have now been imported! You should see them after refreshing the Nebo editor.
Before you commit your changes, please run the following commands. These will compile the Nebo assets for production.
# with npm
npx nebo
# with yarn
yarn run nebo
- After you've deployed your changes, navigate to "Developer" settings in the Nebo App. Switch the "CSS Source URL" to the path of your production Nebo asset (usually
[YOUR_PRODUCTION_URL]/nebo.css
).
Adding your component library
- Run the following command to compile your Nebo assets. This will build two files
nebo.css
andnebo.js
. It will also keep track as you change files.
# with npm
npx nebo watch
# with yarn
yarn run nebo watch
- Navigate to
nebo.js
. Add one of your components to the Nebo directory in the indicated place.
import React from 'react';
import ReactDOM from 'react-dom';
import Component, { configure, fetchComponent } from '@nebohq/nebo';
const accessToken = '[ACCESS_TOKEN]';
const directory = configure({
directory: {
// Add your components here
},
react: React,
renderer: ReactDOM,
accessToken,
});
const fetchSchema = async (idOrSlug) => fetchComponent({ idOrSlug, accessToken });
const NeboComponent = Component;
export default NeboComponent;
export { directory, fetchSchema };
On the Nebo website, navigate to "Developer" settings in the Nebo App. Add
[YOUR_DEVELOPMENT_URL]/nebo.js
(usually something likelocalhost:3000/nebo.js
) to "Javascript Source URL".Your component component has now been imported! You should see it in the library dropdown under "Imported Components".
Before you commit your changes, please run the following commands. These will compile the Nebo assets for production.
# with npm
npx nebo
# with yarn
yarn run nebo
- After you've deployed your changes, navigate to "Developer" settings in the Nebo App. Switch the "JavaScript Source URL" to the path of your production Nebo asset (usually
[YOUR_PRODUCTION_URL]/nebo.js
).
Configuration Options
module.exports = {
plugins: [
...otherPlugins,
{
resolve: 'gatsby-plugin-nebo',
options: {
accessToken: '[ACCESS_KEY]',
pageTemplatePath: `${__dirname}/NeboPage.jsx`, // path to the page template
ignoredPageSlugs: [] // list of page slugs you want to ignore
},
},
],
};
accessToken
- required - used to access your components from your Gatsby app.pageTemplatePath
- path to the Nebo page template. This controls the look of your pages.ignoredPageSlugs
- list of pages to ignore, by their Nebo slug.
Questions and feedback
If you have questions about Nebo or want to provide us feedback, join our discord!
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago