Create Ocean-powered React apps with one command.
Create Ocean App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
If you have questions or need help, please ask in our Discord community.
yarn create ocean-app my-ocean-app
cd my-ocean-app
yarn react-app:start
If you've previously installed create-ocean-app
globally via yarn global add create-ocean-app
, we recommend you
uninstall the package using yarn global remove create-ocean-app
and use the yarn create ocean-app
shorthand to ensure that you use the last version.
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with yarn run react-app:build
.
You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.
You'll also need Yarn on your local development machine. This is because Create Ocean App relies on Yarn Workspaces, a feature not supported by Npm.
To create a new app, you may use the following method:
yarn create ocean-app my-ocean-app
yarn create <starter-kit-package>
is available in Yarn 0.25+
It will create a directory called my-ocean-app
inside the current folder.
Inside that directory, it will generate the initial project structure, assuming you did not provide a custom template:
my-ocean-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
└── packages
├── contracts
│ ├── README.json
│ ├── package.json
│ └── src
│ ├── abis
│ │ └── erc20.json
│ ├── addresses.js
│ └── index.js
└── react-app
├── README.md
├── package.json
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── ethereumLogo.svg
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js
Once the installation is done, you can open your project folder:
cd my-ocean-app
Inside the newly created project, you can run some built-in commands:
To learn React, check out the React documentation.
yarn react-app:start
Runs the React app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.
yarn react-app:test
Runs the React test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.
Read more about testing React.
yarn react-app:build
Builds the React app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your React app is ready to be deployed.
If you're using the yarn create ocean-app
shorthand (the recommended approach), Yarn will automatically update Create Eth
App for you.
Otherwise, you will receive a warning in the shell with the instructions for how to update:
A new version of `create-ocean-app` is available!
You can update by running: yarn global add create-ocean-app
Minimalistic by design: You are one command away from creating a new Ocean-powered React app. No intermediary installs, scripts or shims.
End-to-End: Create Ocean App provides you everything that you need to build and maintain an Ocean-powered React app at scale, by bringing Yarn Workspaces, Create React App and Ocean Protocol under one roof
Not Reinventing The Wheel: Under the hood, you use Create React App, one of the most popular and battle-tested frontend development environments.
Your environment will have everything you need to build a modern Ethereum-powered single-page React app:
This project exists thanks to all the people who contributed:
Along with the creators of create-eth-app
We are grateful to the authors of existing related projects upon which create-ocean-app is based:
Create Ocean App is open source software licensed as MIT.