Whaleshares Logo

Whaleshares Front End on your own computer - Part 2

ijmmaiwitnessPosted for Everyone to comment on, 3 years ago4 min read

image.png

Start Here - Part 1

This is part 2 of "How to run the Whaleshares front end on your own computer

Some helpful Tips

  • In the Terminal you can browse commands you entered earlier by use of the arrow keys on your keyboard
  • You can paste the Terminal commands used in this tutorial by right clicking in the Terminal
  • Open the Terminal as Administrator (see part 1)

What is needed?

  1. nvm (node version manager) - see part 1
  2. nodejs (programming language, very similar to javascript) - see part 1
  3. git (to communicate with the front end code on gitlab)
  4. yarn (package/project manager)
  5. code editor - see part 3
  6. changing front end code - see part 3

Part 2

In this post, numbers 3 and 4 will be covered.

Git for Windows

Git is a program, or rather a system, that will help you keep track of the original code and to organize the changes you make to the code yourself.

When you look at projects that are present on Github.com or Gitlab.com you will see most projects have different versions of their code in different branches. The master branch is the most important one, that branch holds the currently active version of the code. This branch is not changed when features need to be added, or bugs need to be fixed. The common way to handle this is to create a new branch, a copy from the master branch, and make changes to that branch. Once tested, this new branch gets merged into the master branch. This process is repeated for every change to the code.

Install Git

  • Download Git
  • Run Git-2.29.2.2-64-bit.exe (name could be slightly different)

Check Git

To check the installation of Git we are going to ask the system for the Git version number. This is done by executing a command in the Terminal (Command Prompt) program.

  • Open the Terminal as Administrator
  • In the Terminal typ: git --version
    a number should show up on the screen
    image.png

Retrieve the Front End code from Gitlab.com

Again, to keep things organized it is advised to create a folder for the front end code. In this example I created a folder named "test" on my D-drive.

Used commands:
d:
mkdir test
cd test

We are going to clone the code from the busy project from the Whaleshares repository on gitlab.com

Enter in Terminal

image.png
A folder named /busy is created, and filled with files.
You now have the base code to generate the front end, on your local computer.

Yarn

Yarn is a package manager but also a project manager. We will use yarn to start the front end code in development mode.

Install Yarn

Check Yarn

To check the Yarn version

  • In the Terminal typ: yarn -v
    a number should show up on the screen
    image.png

Run the Front End

Just to see if things worked out the way we wanted, let's fire up the front end.

  • make sure you are in the /busy directory (check the prompt)
  • typ: del yarn.lock
    (this file is recreated on install in the next step)
  • typ: nvm use 12.0
    (setting the nodejs version to use)
  • type: yarn install
    (some warnings could show up, but the process should finish just fine)
  • typ: yarn dev
    (this can take some time, and could show some warnings as well)

At the start the screen will show "The project is running at: http://localhost:3000/"
image.png

After a while, you will see a message pop up saying "Compiled successfully"

Open your browser and go to url localhost:3000
The front end should show up the same way it does on whaleshares.io
For the chain code there is no difference between using your local version or the whaleshares.io version. A post submitted using your local version will be stored in the chain, and therefore will show up on whaleshares.io as well.

That is all for this second part. If things don't work out for you, leave a comment and I will try to help you get rid of the errors.


image source

Sign Up to join this conversation, or to start a topic of your own.
Your opinion is celebrated and welcomed, not banned or censored!