Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DAO-593 Added tutorial to get dApp running locally. #390

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -180,3 +180,57 @@ This can be removed in the future.
### End-to-end testing (e2e)

This workflow uses https://github.com/cypress-io/github-action

## How to run the dApp locally

### Prerequisites

You need to have the repository https://github.com/RootstockCollective/dao-backend-services running locally.

### Steps

#### Setup frontend

* ```npm i```
* Create .env.local file
* Carry over what is in .env.dev to .env.local
* Replace NEXT_PUBLIC_RIF_WALLET_SERVICES env var with your localhost url:port, like:
NEXT_PUBLIC_RIF_WALLET_SERVICES=http://localhost:3001
* npm run dev

#### Setup backend

You need to have the repository https://github.com/RootstockCollective/dao-backend-services running locally.

```npm i```

For mac:
```bash
EXPORT PROFILE=dao
```
For windows
```shell
SET PROFILE=dao
```

Find a file named httpsApi.ts and find the line where the app.use(cors()) is being called and replace the condition with a "true"
```javascript
this.app.use(cors({
origin: (origin, callback) => {
if (true) { // <--
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of changing the conditional, I suggest to add http://localhost:3000 to whitelist.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's a less invasive change and it makes cleanup and reversion easier later on. Just a suggestion.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not quite following. The mere purpose of this change is to be able to run the frontend locally. You can run it locally at any port, it can be 3000, 3001, 8080, etc.... Adding it as localhost:3000 could be misleading, instead, by commenting out the conditional, we can ensure a seamless backend connection without running into CORS issues, which is a solid improvement.

Could you provide a bit more context about the cleanup and reversion? It would be helpful to understand the background for these changes.

This approach should make it much easier to connect the frontend to the backend during local development, and I'm happy to help refine it further if needed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know those are temporary changes in order to run it locally. localhost:3000 was just an example, it could be any port, it's the same as you did when you set port 3001 for NEXT_PUBLIC_RIF_WALLET_SERVICES. But anyway, it just a matter of preference. I personally prefer adding the local frontend address into whitelist instead of changing any logic in the code.

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to convince me otherwise if you decide to not take my suggestion, the way you did is fine too.

callback(null, true)
} else {
callback(new Error('Not allowed by cors'))
}
}
}))
```
```shell
npm start
```

Optional:

In order to get the prices, you need a coin market cap api key.
After you get it, set it in the .env.dao
COIN_MARKET_CAP_KEY=your_key
Loading