Quick Start

In order to quickly get up and running with DivSrc.io, clone our create-react-divsrc-app example app. in this example we are using React.js to demonstrate the cloud functionality and local development.

Create DivSrc.io account?

1 - Create new account or login (DivSrc.io)

2 - Create React divsrc app

There are default Secret Key and Public Key generated under a default project. Navigate to https://hub.divsrc/teams -> Default Team -> Default Project

Generate new project

npx @divsrc/create-react-divsrc-app --name tv-shows --prefix @my-org -s [Secret Key] -p [Public Key]

Project Structure:

├── .storybook
│   └── main.js
├── README.md
├── base.rollup.config.js
├── divsrc.json
├── lerna.json
├── package.json
├── packages
│   ├── MovieApp
│   │   ├── .babelrc
│   │   ├── Components
│   │   │   ├── Movie.js
│   │   │   ├── MovieDetails.js
│   │   │   └── MovieList.js
│   │   ├── README.md
│   │   ├── movie.style.css
│   │   ├── package.json
│   │   ├── rollup.config.js
│   │   ├── services
│   │   │   └── movie.service.js
│   │   └── src
│   │       └── index.js
│   └── MovieAppHeader
│       ├── .babelrc
│       ├── README.md
│       ├── package.json
│       ├── rollup.config.js
│       └── src
│           ├── assets
│           ├── index.js
│           └── movieHeader.style.css
└──stories
    ├── Main.stories.js
    └── style.css

3 - Run & Build

Build packages

$ npm run build

Publish Artifacts to DivSrc

$ npm run release

In order to verify that our deploy went well, go to artifacts page and see that they are present in the list.

Run storybook

$ npm run storybook

NOTE! At this point we should not see anything rendered on the screen. First we need to attach our artifacts.

Go to DivSrc Hub, you should be able to see two artifacts: @my-company-movie-app and @my-company-movie-app-header. Click on artifact, select you project from the dropdown and attach it to your project by clicking Install.

Go back to your storybook in your browser, refresh the page. At this stage you should see the app rendered correctly.

Local Development & Emulator

For local development, enable you emulator to serve artifacts locally.

Start emulator

NOTE! emulator is listening by default on port 5555.

Change port number: package.json > emulate command

$ npm run emulate

Run build in watch mode

$ npm run dev
← OverviewBasic Configuration →