|
| 1 | +# Vite + React + Motoko |
| 2 | + |
| 3 | +### Get started directly in your browser: |
| 4 | + |
| 5 | +[](https://gitpod.io/#https://github.com/rvanasa/vite-react-motoko) |
| 6 | + |
| 7 | +This template gives you everything you need to build a full-stack Web3 application on the [Internet Computer](https://internetcomputer.org/). |
| 8 | + |
| 9 | +For an example of a real-world dapp built using this starter project, check out the [source code](https://github.com/dfinity/feedback) for DFINITY's [Developer Experience Feedback Board](https://dx.internetcomputer.org/). |
| 10 | + |
| 11 | +## 📦 Create a New Project |
| 12 | + |
| 13 | +Make sure that [Node.js](https://nodejs.org/en/) `>= 16` and [`dfx`](https://internetcomputer.org/docs/current/developer-docs/build/install-upgrade-remove) `>= 0.14` are installed on your system. |
| 14 | + |
| 15 | +Run the following commands in a new, empty project directory: |
| 16 | + |
| 17 | +```sh |
| 18 | +npx degit rvanasa/vite-react-motoko # Download this starter project |
| 19 | +dfx start --clean --background # Run dfx in the background |
| 20 | +npm run setup # Install packages, deploy canisters, and generate type bindings |
| 21 | + |
| 22 | +npm start # Start the development server |
| 23 | +``` |
| 24 | + |
| 25 | +When ready, run `dfx deploy --network ic` to deploy your application to the Internet Computer. |
| 26 | + |
| 27 | +## 🛠️ Technology Stack |
| 28 | + |
| 29 | +- [Vite](https://vitejs.dev/): high-performance tooling for front-end web development |
| 30 | +- [React](https://reactjs.org/): a component-based UI library |
| 31 | +- [TypeScript](https://www.typescriptlang.org/): JavaScript extended with syntax for types |
| 32 | +- [Sass](https://sass-lang.com/): an extended syntax for CSS stylesheets |
| 33 | +- [Prettier](https://prettier.io/): code formatting for a wide range of supported languages |
| 34 | +- [Motoko](https://github.com/dfinity/motoko#readme): a safe and simple programming language for the Internet Computer |
| 35 | +- [Mops](https://mops.one): an on-chain community package manager for Motoko |
| 36 | +- [mo-dev](https://github.com/dfinity/motoko-dev-server#readme): a live reload development server for Motoko |
| 37 | +- [@ic-reactor](https://github.com/B3Pay/ic-reactor): A suite of JavaScript libraries for seamless frontend development on the Internet Computer |
| 38 | + |
| 39 | +## 📚 Documentation |
| 40 | + |
| 41 | +- [Vite developer docs](https://vitejs.dev/guide/) |
| 42 | +- [React quick start guide](https://react.dev/learn) |
| 43 | +- [Internet Computer docs](https://internetcomputer.org/docs/current/developer-docs/ic-overview) |
| 44 | +- [`dfx.json` reference schema](https://internetcomputer.org/docs/current/references/dfx-json-reference/) |
| 45 | +- [Motoko developer docs](https://internetcomputer.org/docs/current/developer-docs/build/cdks/motoko-dfinity/motoko/) |
| 46 | +- [Mops usage instructions](https://j4mwm-bqaaa-aaaam-qajbq-cai.ic0.app/#/docs/install) |
| 47 | +- [@ic-reactor/react](https://b3pay.github.io/ic-reactor/modules/react.html) |
| 48 | + |
| 49 | +## 💡 Tips and Tricks |
| 50 | + |
| 51 | +- Customize your project's code style by editing the `.prettierrc` file and then running `npm run format`. |
| 52 | +- Reduce the latency of update calls by passing the `--emulator` flag to `dfx start`. |
| 53 | +- Install a Motoko package by running `npx ic-mops add <package-name>`. Here is a [list of available packages](https://mops.one/). |
| 54 | +- Split your frontend and backend console output by running `npm run frontend` and `npm run backend` in separate terminals. |
0 commit comments