Run Frontend of BitClout without running node
Tags: bitclout, frontend, angular
Published: 2021-07-07 12:31:26

You might want to make some changes to the frontend of BitClout but running a node is beyond your league ? Well, you are on the right place of the Internet then!

You can easily run the frontend of BitClout locally on your PC without running node by using some browser hacks :)
If you were to follow the official [docs](https://docs.bitclout.com/code/dev-setup) of BitClout, you will have to run your own node (aka backend) and identity service in order to run the frontend. 
While you read further you must know that this article is about running the frontend for local development only and you can't deploy the frontend for public use. The only use case of this article is to set up the frontend development environment locally so that you can make pull request and contribute to the frontend of BitClout.

Before you get started make sure you are using the latest version of NodeJS and NPM on your PC. Another prerequisite is to have [git](https://git-scm.com/downloads) installed. The frontend of BitClout is made in AngularJS so you must have atleast some basic knowledge of what single page application is.

1. **Fork and Clone the frontend repository.**

Fork the repository of the frontend from [here](https://github.com/bitclout/frontend). When done open your terminal and run `git clone <https://github.com/YOUR_GITHUB_USERNAME/frontend>`

![Screenshot from 2021-07-07 16-14-53.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625654737180/rS0LgP_dk.png)

2. **Open the frontend in your code editor**

Now change the current working directory into the newly created frontend folder by `cd frontend`. 
You can open the **frontend** folder in your code editor to scroll through the code. We are using [Visual Studio Code](https://code.visualstudio.com/) here. Run `code .` in the terminal to open the folder in VS Code. 
![Screenshot from 2021-07-07 16-22-01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625655181145/SPNLW_UXZ.png)

Now you have the frontend code of the world's best social media on your PC :)

![Screenshot from 2021-07-07 16-29-20.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625655630344/WLfiTZnFw.png)

3. **Install project dependencies**

As mentioned earlier, the frontend of BitClout is made in AngularJS. To install all the project dependencies run `npm install` in your terminal. This may take a while.
![Screenshot from 2021-07-07 16-36-56.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625656077971/hF6-jfTgy.png)

If everything went good, you may only get some warnings (or worst case tons of errors. If this is the case, google your problem)

4. **Run the frontend**

To run the frontend on your browser run `ng serve` in your terminal. This may take some time since there are bunch of files to compile.
![Screenshot from 2021-07-07 16-44-13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625656479013/iSHgJsNAr.png)

Have your fingers crossed and let the code compile. For my case I got some circular dependency warnings, but finally I can see my frontend live at `http://localhost:4200/`
![Screenshot from 2021-07-07 16-46-01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625656635965/qTZxub-c1.png)

Open your browser at `http://localhost:4200/` and have dev tools open. In the dev tools you will see tons errors. Congratulation! You have almost set-up the frontend dev environment!

![Screenshot from 2021-07-07 16-49-57.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625656980369/jG2YHpNpU.png)

5. **Point the node to BitClout's main node**

By default, your browser will point the node to a local hosted node (which does not exists in our case because we are only running the frontend). So you need to point the node to the main node of bitclout.
Just open up the dev tools in your browser, go to the applications tab and in the local storage of `http://localhost:4200` change `lastLocalNodeV2` to `"https://bitclout.com"`
Here is an image to get things easier:

![Screenshot from 2021-07-07 16-56-20.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625657278534/1T0ht0oFW.png)

If you now reload the page and check your dev tools you will notice that you still have tons of errors. These errors are known as CORS errors. For the sake of security, browsers block cross origin resource sharing. Here you are sharing the resource of `https://bitclout.com` through you local host i.e `https://localhost:4200`.
![Screenshot from 2021-07-07 16-59-13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625657531318/UoZ3FsTjj.png)

6. **Unblock CORS for one's browser**

You now need to unblock CORS by using some third party extensions. For our case we are using [CORS Unblock](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/related)  browser extension 

NOTE: Use this extension only when it's required and have it disabled most of the time. There is security reasons why your browser gives CORS error

Install the extension and enable it while you want to run the BitClout's frontend through the main node. Make sure you have enabled all forms of CORS unblock especially the `Enable Access-Control-[Allow/Expose]-Headers`.
Have the extension on with all the above mentioned settings and reload the page!
Now login with the identity service and you have your frontend running locally on your PC without running node!


Here is a preview of the frontend on my local host!
![Screenshot from 2021-07-07 17-27-20.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625659185404/FGvrJadvi.png)

Congratulations! You are now running the frontend of the world's best social media (Ok, I maybe biased)
Why not improve some UI and do some PR ?

If you like the article don't forget to let us know in the comments or maybe give a shout to [DevsClout](https://bitclout.com/u/DevsClout) ? You can also join DevsClout [discord server](https://discord.gg/4tCW2C8WhQ) to chat with more devs who are building awesome projects on BitClout! We would love to hear back from you!