@nebohq/nebo
Visually build embeddable React components for your marketing and production websites.
Table of Contents
Install
- Install
@nebohq/nebo
:
# if you are using npm
npm install @nebohq/nebo
# if you are using yarn
yarn add @nebohq/nebo
-
Sign up for Nebo. After you've signed in, navigate to "Settings" on the side bar.
-
Find and copy the access token. You can find it in the "Developers" section:
- Use the Nebo plugin to set up your repository. Change the command below with your access token, static assets path, and global styles path.
# with npm
npx nebo init --access-token=your-access-token --public-path=./path/to/static/assets --global-styles-path=./src/stylesheets/application.scss
# with yarn
yarn run nebo init --access-token=your-access-token --public-path=./path/to/static/assets --global-styles-path=./src/stylesheets/application.scss
-
This will generate two files:
nebo.config.js
andnebo.js
. We'll use the first to import components and the latter output Nebo assets for use in settings. -
You're ready to build pages!
How to use
Adding pages
-
Navigate to Nebo pages.
-
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.
- 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've saved your page, import it in an appropriate place for your app.
import NeboComponent from './nebo'; // change this path to point to your Nebo directory configuration
const YourComponent = () => {
return <NeboComponent slug="YOUR SLUG NAME HERE" />;
}
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
).
Questions and feedback
If you have questions about Nebo or want to provide us feedback, join our discord!