Skip to content

Commit

Permalink
Add Create Aptos Dapp section to get started -> developer setup (#584)
Browse files Browse the repository at this point in the history
  • Loading branch information
@igor-p
igor-p authored Sep 6, 2024
1 parent 7dec28f commit ecaec00
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 116 deletions.
294 changes: 178 additions & 116 deletions apps/nextra/pages/en/build/get-started/developer-setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,131 +2,193 @@
title: "Developer Setup"
---

import { Tabs, Tab, Steps } from 'nextra/components'
import { Tabs, Steps } from 'nextra/components'
import { Cards, Card } from '@components/index'

# Developer Setup

Here is an easy way to setup your environment depending on the type of development.

<Tabs items={['Frontend', 'Smart Contract']}>
{/* Frontend */}
<Tabs.Tab>
<Steps>

### Initialize Frontend Project

Here are some examples of popular choices:

<Tabs items={['Next.js', 'Vite (TS)']}>
<Tabs.Tab>
```bash filename="Terminal"
pnpx create-next-app@latest
```
</Tabs.Tab>
<Tabs.Tab>
```bash filename="Terminal"
pnpx create vite my-aptos-app --template react-ts
```
</Tabs.Tab>
</Tabs>

### Install `@aptos-labs/ts-sdk`

```bash npm2yarn
npm i @aptos-labs/ts-sdk
```

### Setup TS SDK

<Cards>
<Card href="../sdks/ts-sdk/quickstart">
<Card.Title>TS SDK Quickstart</Card.Title>
<Card.Description>See how to setup your account, network, use the faucet, send / simulate transactions, and more</Card.Description>
</Card>
</Cards>

### Build your app!

The developer setup for using Aptos in your frontend is now complete.
Checkout our other tools that streamline the development process

<Cards>
<Card href="../indexer">
<Card.Title>Indexer</Card.Title>
<Card.Description>Efficiently query for on-chain state like balances, transaction activity, token data, and more</Card.Description>
</Card>
<Card href="https://github.com/aptos-labs/aptos-ts-sdk/tree/main/examples/typescript">
<Card.Title linkType="external">TS SDK Examples</Card.Title>
<Card.Description>20+ Examples of how to use the TS SDK</Card.Description>
</Card>
<Card href="https://developers.aptoslabs.com/">
<Card.Title linkType="external">API Gateway</Card.Title>
<Card.Description>Hitting rate limits for Fullnode API / Indexers? Get an API Key here</Card.Description>
</Card>
</Cards>

</Steps>
</Tabs.Tab>

{/* Smart Contract */}
<Tabs.Tab>
<Steps>

### Install CLI

<Cards>
<Card href="../cli">
<Card.Title>Aptos CLI</Card.Title>
<Card.Description>
Instructions for how to install Aptos CLI
</Card.Description>
</Card>
</Cards>

### Setup Editor or IDE

Add the following extensions to your editor of choice to make Move Development easier
<Tabs items={['Frontend', 'Smart Contract', 'Create Aptos Dapp']}>
{/* Frontend */}
<Tabs.Tab>
<Steps>

### Initialize Frontend Project

Here are some examples of popular choices:

<Tabs items={['Next.js', 'Vite (TS)']}>
<Tabs.Tab>
```bash filename="Terminal"
pnpx create-next-app@latest
```
</Tabs.Tab>
<Tabs.Tab>
```bash filename="Terminal"
pnpx create vite my-aptos-app --template react-ts
```
</Tabs.Tab>
</Tabs>

### Install `@aptos-labs/ts-sdk`

```bash npm2yarn
npm i @aptos-labs/ts-sdk
```

### Setup TS SDK

<Cards>
<Card href="../sdks/ts-sdk/quickstart">
<Card.Title>TS SDK Quickstart</Card.Title>
<Card.Description>See how to setup your account, network, use the
faucet, send / simulate transactions, and more</Card.Description>
</Card>
</Cards>

### Build your app!

The developer setup for using Aptos in your frontend is now complete.
Checkout our other tools that streamline the development process

<Cards>
<Card href="../indexer">
<Card.Title>Indexer</Card.Title>
<Card.Description>Efficiently query for on-chain state like balances,
transaction activity, token data, and more</Card.Description>
</Card>
<Card
href="https://github.com/aptos-labs/aptos-ts-sdk/tree/main/examples/typescript">
<Card.Title linkType="external">TS SDK Examples</Card.Title>
<Card.Description>20+ Examples of how to use the TS
SDK</Card.Description>
</Card>
<Card href="https://developers.aptoslabs.com/">
<Card.Title linkType="external">API Gateway</Card.Title>
<Card.Description>Hitting rate limits for Fullnode API / Indexers? Get
an API Key here</Card.Description>
</Card>
</Cards>

</Steps>
</Tabs.Tab>

<Tabs items={['JetBrains IDE', 'VSCode']}>
{/* Smart Contract */}
<Tabs.Tab>
<Cards>
<Card href="https://plugins.jetbrains.com/plugin/14721-move-language">
<Card.Title linkType="external">Move Language</Card.Title>
<Card.Description>Language server and syntax highlighter for JetBrains IDEs like CLion, Rust Rover, WebStorm, IntelliJ</Card.Description>
</Card>
</Cards>
<Steps>

### Install CLI

<Cards>
<Card href="../cli">
<Card.Title>Aptos CLI</Card.Title>
<Card.Description>
Instructions for how to install Aptos CLI
</Card.Description>
</Card>
</Cards>

### Setup Editor or IDE

Add the following extensions to your editor of choice to make Move
Development easier

<Tabs items={['JetBrains IDE', 'VSCode']}>
<Tabs.Tab>
<Cards>
<Card
href="https://plugins.jetbrains.com/plugin/14721-move-language">
<Card.Title linkType="external">Move Language</Card.Title>
<Card.Description>Language server and syntax highlighter for
JetBrains IDEs like CLion, Rust Rover, WebStorm,
IntelliJ</Card.Description>
</Card>
</Cards>
</Tabs.Tab>
<Tabs.Tab>
<Cards>
<Card
href="https://marketplace.visualstudio.com/items?itemName=MoveBit.aptos-move-analyzer">
<Card.Title linkType="external">Aptos Move Analyzer</Card.Title>
<Card.Description>Language server and syntax highlighter for
VSCode</Card.Description>
</Card>
</Cards>
</Tabs.Tab>
</Tabs>

### Create Smart Contract

Navigate to your application folder and initialize a new smart contract by
doing:

```sh filename="Terminal"
aptos move init --name my_todo_list
```

### Build, Compile, and Deploy Smart Contract!

The developer setup for using Aptos for smart contracts is now complete.
For more info see the link to the Dapp tutorial below

<Cards>
<Card
href="../guides/build-e2e-dapp/1-create-smart-contract#what-is-a-movetoml-file">
<Card.Title>Create Smart Contract Guide</Card.Title>
<Card.Description>An easy todo list guide for how to setup a smart
contract with Move</Card.Description>
</Card>
</Cards>

</Steps>
</Tabs.Tab>
{/* create-aptos-dapp */}
<Tabs.Tab>
<Cards>
<Card href="https://marketplace.visualstudio.com/items?itemName=MoveBit.aptos-move-analyzer">
<Card.Title linkType="external">Aptos Move Analyzer</Card.Title>
<Card.Description>Language server and syntax highlighter for VSCode</Card.Description>
</Card>
</Cards>
<Steps>
### Install `create-aptos-dapp`
Run the below command to install a dApp from a template in seconds:
<Tabs items={["npx", "pnpx"]}>
{ /* npx */ }
<Tabs.Tab>
```bash filename="Terminal"
npx create-aptos-dapp@latest
```
</Tabs.Tab>
{ /* pnpx */ }
<Tabs.Tab>
```bash filename="Terminal"
pnpx create-aptos-dapp@latest
```
</Tabs.Tab>
</Tabs>

### Follow the prompts
Follow the CLI prompts to select a name, [template](../create-aptos-dapp#templates), and network for your new dApp.

![cad](/docs/cad-video.gif)

### Start building and customizing your new dApp!
Navigate to your new project and open in your favorite IDE to continue building!

Follow the generated `README.md` file for next steps.

### Continue reading
<Cards>
<Card href="../create-aptos-dapp">
<Card.Title>Create Aptos Dapp</Card.Title>
<Card.Description>Get more information about the tool</Card.Description>
</Card>
<Card href="../create-aptos-dapp#templates">
<Card.Title>Templates</Card.Title>
<Card.Description>Browse premade templates</Card.Description>
</Card>
<Card href="../create-aptos-dapp/faq">
<Card.Title>FAQ</Card.Title>
<Card.Description>Get help for common issues and questions</Card.Description>
</Card>
</Cards>

</Steps>
</Tabs.Tab>
</Tabs>

### Create Smart Contract

Navigate to your application folder and initialize a new smart contract by doing:

```sh filename="Terminal"
aptos move init --name my_todo_list
```

### Build, Compile, and Deploy Smart Contract!

The developer setup for using Aptos for smart contracts is now complete.
For more info see the link to the Dapp tutorial below

<Cards>
<Card href="../guides/build-e2e-dapp/1-create-smart-contract#what-is-a-movetoml-file">
<Card.Title>Create Smart Contract Guide</Card.Title>
<Card.Description>An easy todo list guide for how to setup a smart contract with Move</Card.Description>
</Card>
</Cards>

</Steps>
</Tabs.Tab>
</Tabs>
6 changes: 6 additions & 0 deletions apps/nextra/utils/generated/localeMap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,6 +454,9 @@ export const localeMap = {
"/build/smart-contracts/book/constants": {
"en": true
},
"/build/smart-contracts/bookums": {
"en": true
},
"/build/smart-contracts/book/equality": {
"en": true
},
Expand Down Expand Up @@ -481,6 +484,9 @@ export const localeMap = {
"/build/smart-contracts/book/modules-and-scripts": {
"en": true
},
"/build/smart-contracts/book/move-2.0": {
"en": true
},
"/build/smart-contracts/book/move-tutorial": {
"en": true
},
Expand Down

0 comments on commit ecaec00

Please sign in to comment.