Whaleshares Logo

Whaleshares Front End on your own computer - Part 3

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


Start Here - Part 1

This is part 3 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) - see part 2
  4. yarn (package/project manager) - see part 2
  5. code editor
  6. changing front end code

Part 3

In this post, numbers 5 and 6 will be covered.

Code Editor

Code is essentially just text. You can create, read, adjust code perfectly fine in a plain text editor like Notepad. There is however an advantage in using an editor program dedicated to code. Most of the code editors will at least highlight functions, variables and so on. This makes the code easier to read but also provides an indication in case you have a typo. Some code editors have an autocomplete feature that will help to prevent typos. Some code editors can even analyze your code and notify you on redundant variables, for example.

I use Sublime Text, that is a shareware program. There are many free alternatives. Do some research, try a few and pick the one you like most.

Front end code

Now that you have your own Whaleshares front end locally, you can make changes to it as well.
First thing we need to do is, create a new branch. Don't change the master branch code. Create a copy and fiddle with that branch. To create a new branch we are going to use git again.

  • Open the Terminal as Administrator
  • Typ: git checkout -b myfeature master

This command will create a new branch, as a copy of master branch, named "myfeature". The "checkout" parameter sets the new "myfeature" branch as active branch. Changes you make to the code will be applied to this new branch. The master branch is not altered.

Let's start the front end using this new branch

  • make sure you are in the /busy directory (check the prompt)
  • typ: nvm use 12.0
    (setting the nodejs version to use)
  • typ: yarn dev
    (this can take some time, and could show some warnings as well)

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, we haven't changed anything yet.

The code is based on the code of the Busy project. The Busy project code is created using React. There is a lot to know and learn about React but that is something for another tutorial. If you want to get your hands dirty, google it. There are many resources for React.

  • Open your code editor
  • Browse to the /src/client folder

This folder contains just about everything you need when changing the front end. Let's assume you never liked the phrase "Compose" that much. You'd rather change it into "Write a Post".

The code that generates the left sidebar can be found in:
at line 134 you will find:
<FormattedMessage id="compose" defaultMessage="Compose" />

Change "compose" to "write_a_post"
Change "Compose" to "Write a Post"

  • Save the file

This is what happens when adjusting code.

  • change the code
  • save the changes
  • yarn will detect the changes and recompile the code
  • page in browser will be refreshed
  • your new code is implemented (in your local version)

Sometimes, after the page refreshes, the page will stay empty. This means there is an error in your code. You can check Console (Ctrl+F12) and/or Terminal for error messages. It is best to change code step by step. Many changes in one go, will make debugging complicated.

That is all for this tutorial (3 posts total). If things don't work out for you, leave a comment and I will try to help you get rid of the errors.

Follow up tutorials could include:

  • React
  • Git

Note: The translated phrases are stored in and retrieved from separate language files. The official way to adjust phrases is by changing the default message, NOT the id, and adjusting the phrase in the language file(s).

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!