decentology / algorand-mono

The current version of algorand.dev with integrated Hyperverse code.

Getting Started

npm i

Developing.

npm run start

Compiling for production.

npm run build

Lessons Learned

#1

algosdk doesn't play nice with create-react-app because react-scripts v5.0.0 uses Webpack 5 which doesn't polyfill crypto and other Node packages.

Change your react-scripts dependency to 4.0.3.

"dependencies": {
  "react-scripts": "4.0.3"
}

This unfortunately breaks your hot-reload and you need to add the following dev dependency to override the broken one.

"devDependencies": {
  "react-error-overlay": "6.0.9"
}

After changing your package.json delete node_modules and package-lock.json and reinstall everything.

npm install

source source

#2

While in development (localhost) WalletConnect won't work without a https connection.

You can either fix this by using ngrok as a reverse proxy.

ngrok http -region eu 3000

Or you can generate your own certificate.

1. Install mkcert on your operating system – instructions.
2. $ mkcert -install – generate a local certificate authority.
3. $ mkcert localhost – generate a certificate (if you want local network access, use host IP within local network, I.e. 192.168.X.X).
4. $ mkdir certificates – create folder to store certificate files (not part of code repository).
5. $ mv localhost* certificates/ – move them there.

Then add two environment variables to start using your certificates locally.

HTTPS=true
SSL_CRT_FILE=certificates/192.168.X.X.pem
SSL_KEY_FILE=certificates/192.168.X.X-key.pem

You can add environment variables to your package.json by modifying your start script to "start": "HTTPS=true ....

source