Fixing "Error Connecting to Substrate" message in Substrate Front End Template

I was exploring the Substrate Blockchain the other day and was going through "Create Your First Substrate Chain" tutorial. I was building the Substrate node template on a Linux VPS and after successfully running the node and starting the Substrate Front End Template, the front-end was not accessible when trying to connect to it from my browser remotely as I was getting the "Error Connecting to Substrate [object Event]" error message.

After starting the Front-End Template on VPS with development mode using yarn start, I modified the localhost part of http://localhost:8000/substrate-front-end-template on my browser with my VPS IP address http://X.X.X.X:8000/substrate-front-end-template, but I was getting the error:

First I checked if the Substrate node was really running in the back-end and it was. The node was producing blocks.

In the end, I was able to make the Substrate front-end template work from remote client IP using two different methods. In the first method, the Front End Template is accessible from any remote IP client, while the second method makes it accessible only from your local development machine, but it doesn't need any changes, all it needs is the use of Visual Studio Code editor.

But, let's explore the first method first which has two steps.

Step 1 - Run the substrate node using --ws-external flag

First, I tried to add the --ws-external option when running the node-template, so that the command that starts the Substrate node was the following:

node-template --dev --tmp --ws-external

The --ws-external flag would make the node to listen to all WebSocket interfaces (the default is local).

Unfortunately, the Substrate front-end template was still showing the same "Error Connecting to Substrate" error message. I had to make one more change, this time in the front-end template JSON file.

Step 2 - Modifying development.json file for Front End Template

The --ws-external alone did not fix the issue, so I focused on the Substrate Front End template itself. After a bit of exploring the source code, I noticed configuration files inside src/config folder.

Inside the development.json file of the "Substrate Front End Template" v2.0 we get the following configuration:

{
  "CUSTOM_TYPES": {
    "Address": "AccountId",
    "LookupSource": "AccountId"
  },
  "PROVIDER_SOCKET": "ws://127.0.0.1:9944"
}

While the development.json for "Substrate Front End Template" v3.0 is smaller:

{
  "PROVIDER_SOCKET": "ws://127.0.0.1:9944"
}

Whatever version we are running, we need to modify the "PROVIDER_SOCKET" to point to the IP where the node is also running, which in my case was the same VPS:

  "PROVIDER_SOCKET": "ws://X.X.X.X:9944"

After running the Front End Template with yarn start, the Front-end template should now finally work and be accessible from anywhere.

But what if you are only interested in the Front End Template to work on your development machine, and you don't care if it's not available from other remote IPs? Let's explore that next.

Connecting to VPS using "Remote - SSH" extension in VS Code

I noticed that this issue does not exist if I'm connected to my VPS using Visual Studio Code using Remote SSH extension. It seems that when connected this way, the VS Code forwards ports and I can access the Front-End Template using the http://localhost:8000/substrate-front-end-template or http://127.0.0.1:8000/substrate-front-end-template from my development machine.

Conclusion

When building "Create Your First Substrate Chain" tutorial, you might encounter the "Error Connecting to Substrate [object Event]" error message. This happens when the build is not made on the same machine as the one you try to access the Front-End Template from. In the first solution, we opened the web sockets of the substrate node to the public and modified the .json file, while the second solution used VS Code Remote SSH extension to forward the ports to the local machine.