Skip to content

Commit 2ca25e0

Browse files
smiasojedsmiasojed
authored
Update REMIXD tutorial (#26)
Closes paritytech/contract-issues#7
1 parent 8fb1401 commit 2ca25e0

File tree

5 files changed

+84
-68
lines changed

5 files changed

+84
-68
lines changed

‎docs/tutorial/2-deploy-your-first-contract.md

Lines changed: 7 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ sidebar_position: 2
33
slug: /deploy-your-first-contract
44
---
55

6-
import {WestendNetworkButton} from '@site/src/components/NetworkButton';
7-
86
# Deploy Your First Contract
97

108
This guide will walk you through deploying and interacting with contracts in REMIX.
@@ -37,11 +35,14 @@ This guide will walk you through deploying and interacting with contracts in REM
3735
1. Interact with Deployed Contracts.
3836

3937
Once deployed, your contract will appear in the **Deployed/Unpinned Contracts** section of the **Deploy & Run** tab.
38+
To keep your contract visible after reloading Remix, pin it to the workspace. Pinning a contract moves it to the **Pinned Contracts** section, ensuring it won't disappear upon reload. When pinned, Remix will save both the contract’s address and its ABI for easy access.
4039

41-
![Call contract](img/dapp_call.jpeg)
40+
![Pin contract](img/pin.png)
4241

4342
You can interact with your contract by calling its methods from this section, with all transactions routed through MetaMask.
4443

44+
![Call contract](img/dapp_call.jpeg)
45+
4546
2. Run Tests.
4647

4748
Currently, REMIX supports JavaScript tests only.
@@ -51,70 +52,8 @@ This guide will walk you through deploying and interacting with contracts in REM
5152

5253
Run it by clicking the **▶️** button.
5354

54-
## Connect to Your Local Filesystem
55-
56-
To enable seamless interaction between REMIX IDE and your local development environment, you can connect to your filesystem using the REMIXD tool. This allows you to easily manage and edit your smart contract files directly from REMIX IDE. Follow these steps to establish the connection.
57-
58-
1. Install Node
59-
60-
As a prerequisite install Node, e.g., using [Volta](https://volta.sh/) (which will also install `npm`):
61-
62-
```bash
63-
# install Volta
64-
curl https://get.volta.sh | bash
65-
66-
# install Node
67-
volta install node
68-
```
69-
70-
2. Install REMIXD
71-
72-
Install the REMIXD tool globally on your machine by running the following command in your terminal:
73-
74-
```bash
75-
npm install -g @remix-project/remixd
76-
```
77-
78-
3. Run REMIXD
79-
80-
After installation, launch the REMIXD server by specifying the directory you want to share and the REMIX IDE URL. Replace `<YOUR_DIRECTORY>` with the path to your local project folder:
81-
82-
```bash
83-
remixd -s <YOUR_DIRECTORY> -u https://remix.polkadot.io
84-
```
85-
86-
4. Activate REMIXD plugin in REMIX
87-
88-
Go to the **Plugin Manager** tab. Find **REMIXD**, click **Activate**, and then select **Connect** to link your local directory with the IDE.
89-
90-
![Enable REMIXD](img/dapp_remixd.jpeg)
91-
92-
## Generate and Deploy DApp UI with Quick DApp Plugin
93-
94-
The Quick DApp plugin in REMIX simplifies the process of creating and deploying decentralized applications (DApps). This tool automates the generation of a user interface (UI) for your smart contracts and facilitates quick deployment to the Surge platform.
95-
96-
1. Activate the Plugin
97-
98-
Open REMIX IDE and navigate to the **Plugin Manager** tab. Search for **Quick DApp** and click **Activate**.
99-
100-
2. Select Your Contract
101-
102-
Choose the smart contract you want to deploy from the **Deploy & Run** tab. The plugin will automatically identify your contract and generate a corresponding UI.
103-
104-
3. Configure the UI
105-
106-
You can customize the UI components based on the functions of your smart contract. The plugin allows you to specify which functions to expose to the user interface.
107-
108-
4. Setup Surge
109-
110-
```bash
111-
# install surge
112-
npm install --global surge
113-
114-
# create login
115-
surge login
116-
```
55+
## How to Interact with Already Deployed Contracts
11756

118-
5. Deploy to Surge
57+
If you need to interact with already deployed contracts, make sure to note down their addresses beforehand so you can load them later using the **At Address** button.
11958

120-
Once your UI is configured, click the **Deploy** button. The plugin will handle the deployment process to Surge, providing you with a public URL to access your DApp.
59+
![Load contract](img/load_contract.png)

‎docs/tutorial/img/download.png

27.4 KB
Loading

‎docs/tutorial/img/load_contract.png

54.6 KB
Loading

‎docs/tutorial/img/pin.png

21.9 KB
Loading

‎docs/tutorial/remix-tips.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
sidebar_position: 7
3+
---
4+
5+
# REMIX Tips
6+
7+
## Generate and Deploy DApp UI with Quick DApp Plugin
8+
9+
The Quick DApp plugin in REMIX simplifies the process of creating and deploying decentralized applications (DApps). This tool automates the generation of a user interface (UI) for your smart contracts and facilitates quick deployment to the Surge platform.
10+
11+
1. Activate the Plugin
12+
13+
Open REMIX IDE and navigate to the **Plugin Manager** tab. Search for **Quick DApp** and click **Activate**.
14+
15+
2. Select Your Contract
16+
17+
Choose the smart contract you want to deploy from the **Deploy & Run** tab. The plugin will automatically identify your contract and generate a corresponding UI.
18+
19+
3. Configure the UI
20+
21+
You can customize the UI components based on the functions of your smart contract. The plugin allows you to specify which functions to expose to the user interface.
22+
23+
4. Setup Surge
24+
25+
```bash
26+
# install surge
27+
npm install --global surge
28+
29+
# create login
30+
surge login
31+
```
32+
33+
5. Deploy to Surge
34+
35+
Once your UI is configured, click the **Deploy** button. The plugin will handle the deployment process to Surge, providing you with a public URL to access your DApp.
36+
37+
## Connect to Your Local Filesystem
38+
39+
If you prefer working with contracts on your local filesystem, Remix can connect directly to it. Keep in mind that connecting to your local filesystem will switch your current workspace. If you want to keep working on contracts from your current workspace, make sure to download them first.
40+
41+
![Download workspace](img/download.png)
42+
43+
To enable seamless integration between Remix IDE and your local development environment use the remixd tool. This allows you to easily manage and edit your smart contract files directly from Remix IDE. Follow these steps to establish the connection.
44+
45+
1. Install Node
46+
47+
As a prerequisite install Node, e.g., using [Volta](https://volta.sh/) (which will also install `npm`):
48+
49+
```bash
50+
# install Volta
51+
curl https://get.volta.sh | bash
52+
53+
# install Node
54+
volta install node
55+
```
56+
57+
2. Install REMIXD
58+
59+
Install the REMIXD tool globally on your machine by running the following command in your terminal:
60+
61+
```bash
62+
npm install -g @remix-project/remixd
63+
```
64+
65+
3. Run REMIXD
66+
67+
After installation, launch the REMIXD server by specifying the directory you want to share and the REMIX IDE URL. Replace `<YOUR_DIRECTORY>` with the path to your local project folder:
68+
69+
```bash
70+
remixd -s <YOUR_DIRECTORY> -u https://remix.polkadot.io
71+
```
72+
73+
4. Activate REMIXD plugin in REMIX
74+
75+
Go to the **Plugin Manager** tab. Find **REMIXD**, click **Activate**, and then select **Connect** to link your local directory with the IDE.
76+
77+
![Enable REMIXD](img/dapp_remixd.jpeg)

0 commit comments

Comments
 (0)