create-eth-app

# Create Eth App [![Styled with Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io) [![Commitizen Friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md) Create Ethereum-powered apps with one command. Create Eth App works on macOS, Windows, and Linux. If something doesn’t work, please [file an issue](https://github.com/paulrberg/create-eth-app/issues/new). If you have questions or need help, please ask in our [Discord](https://discord.gg/bsS8T47) community. ## Quick Overview ```sh yarn create eth-app my-eth-app cd my-eth-app yarn react-app:start ``` If you've previously installed `create-eth-app` globally via `yarn global add create-eth-app`, we recommend you uninstall the package using `yarn global remove create-eth-app` and use the `yarn create eth-app` shorthand to ensure that you use the last version. Then open [http://localhost:3000/](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`. <img src="./screencast.gif" width="600" alt="yarn react-app:start"> ## Creating an App **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](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects. **You'll also need Yarn on your local development machine**. This is because Create Eth App relies on Yarn Workspaces, a feature not supported by Npm. To create a new app, you may use the following method: ```sh yarn create eth-app my-eth-app ``` _[`yarn create <starter-kit-package>`](https://yarnpkg.com/lang/en/docs/cli/create/) is available in Yarn 0.25+_ It will create a directory called `my-eth-app` inside the current folder. Inside that directory, if you didn't use a custom [framework](https://github.com/paulrberg/create-eth-app#frameworks) or [template](https://github.com/paulrberg/create-eth-app#templates), you will get the initial project structure: ``` my-eth-app ├── README.md ├── node_modules ├── package.json ├── .gitignore └── packages ├── contracts │ ├── README.json │ ├── package.json │ └── src │ ├── abis │ │ ├── erc20.json │ │ └── ownable.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 └── subgraph ├── README.md ├── abis │ └── erc20.json ├── package.json ├── schema.graphql ├── src │ └── mappings │ ├── tokens.ts │ └── transfers.ts └── subgraph.yaml ``` Once the installation is done, you can open your project folder: ```sh cd my-eth-app ``` ### Frameworks Create Eth App supports multiple frontend frameworks. See the folders under [templates](/templates) for a complete list of the available options. You can pass the name of the framework as the value for the `--framework` command-line argument. Create Eth App defaults to React if no framework is provided manually. ```sh yarn create eth-app my-eth-app --framework vue ``` ### Templates Create Eth App comes with a host of decentralized finance templates pre-filled with contract ABIs, addresses and subgraphs. Go to the [templates](/templates) folder, select any framework from the list and see what templates are available. You can pass the name of the template as the value for the `--template` command-line argument. ```sh yarn create eth-app my-eth-app --template compound ``` ## Philosophy - **Minimalistic by design:** You are one command away from creating a new Ethereum-powered React app. No intermediary installs, scripts or shims. - **End-to-End**: Create Eth App provides you everything that you need to build and maintain an Ethereum-powered React app at scale, by bringing Yarn Workspaces, Create React App and The Graph under one roof - **Aimed at Experience Architects**: As Kames CG argues in [Ethereum Growth's Problem](https://medium.com/horizin/ethereums-growth-problem-5cab86734917), the Ethereum ecosystem is in a much greater need for top-notch product creators, not smart contract developers. Create Eth App does not enable a smart contract development environment, expecting you to import your own ABIs or build on top of an established protocol like [Maker](https://makerdao.com), [Compound](https://compound.finance/) or [Sablier](https://sablier.finance) - **Not Reinventing The Wheel**: Under the hood, you use Create React App, one of the most popular and battle-tested frontend development environments. ## What’s Included? Your environment will have everything you need to build a modern Ethereum-powered single-page React app: - Smooth project management via [Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) - Everything included with [Create React App](https://github.com/facebook/create-react-app/blob/master/README.md#whats-included): React, JSX, ES6, TypeScript and Flow syntax support - Template subgraph that indexes the events emitted by an [ERC-20](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-20.md) contract - Minimalist structure for managing the smart contract [ABIs](https://ethereum.stackexchange.com/questions/234/what-is-an-abi-and-why-is-it-needed-to-interact-with-contracts) and addresses - Hassle-free updates for the above tools with a single dependency ## Popular Alternatives Create Eth App is a great fit for: - **Learning how to write Ethereum-powered apps** in a comfortable and feature-rich development environment. - **Starting new Ethereum-powered single-page React applications** without wasting time on copy-pasting boilerplates - **Creating examples** with React for your Ethereum-related libraries and components. But Ethereum is a large ecosystem. Here are a few common cases where you might want to try something else: - If you want to **try Ethereum** in its most basic form, consider [using the Remix in-browser IDE](https://remix.ethereum.org/) - If you want to **write, test and deploy smart contracts**, consider using [Truffle](https://trufflesuite.com/), [Dapp Tools](https://github.com/dapphub/dapptools) or [Etherlime](https://github.com/LimeChain/etherlime) - If you want **write smart contracts and also build a frontend app**, consider [using the Truffle React Box](https://github.com/truffle-box/react-box) - If you want to write smart contracts and keep the frontend app in the same repository but **React isn't your cup of tea**, consider [using the Embark framework](https://github.com/embarklabs/embark) - If you need to use a complex state container like Redux, consider [using Drizzle](https://www.trufflesuite.com/drizzle) For alternatives to React in particular, read the [official Create React App documentation](https://github.com/facebook/create-react-app/blob/master/README.md#popular-alternatives). ## Credits This project exists thanks to all the people who contributed: - [@PaulRBerg](https://github.com/paulrberg) - [@TomAFrench](https://github.com/TomAFrench) - [@KadenZipfel](https://github.com/kadenzipfel) - [@rnbrady](https://github.com/rnbrady) ## Acknowledgements We are grateful to the authors of existing related projects from which we drew inspiration: - [create-react-app](https://github.com/facebook/create-react-app) - [create-next-app](https://github.com/zeit/next.js/tree/master/packages/create-next-app) And also the Vue.js community for the CLI we used to generate our templates: - [@vue/cli](https://cli.vuejs.org/) ## License Create Eth App is open source software [licensed as MIT](https://github.com/paulrberg/create-eth-app/blob/develop/LICENSE).