# 06. Clone the Repo (frontend)

By now we should already have a folder on our system that contains our backend/server project \
(`~/shSMS`). Now we're going to add the frontend client.

1. Navigate to the folder that's already got `shsms-backend`\
   \
   `cd ~/shSMS`\\

2. Clone the frontend repo\\

   `git clone https://github.com/pywkt/shsms-frontend.git`\\

3. Navigate to the directory we just created\\

   `cd shsms-frontend`\\

4. Install frontend dependencies\\

   `npm install`\\

5. After everything is installed, navigate to `node_modules/cordova-plugin-advanced-background-mode/src/android` and open the file called `BackgroundModeExt.java`\
   \
   change line `151` \
   \
   from `View view = webView.getEngine().getView();` \
   \
   to `View view = webView.getView();`\
   \
   Save the file.\
   \\

6. Check to see if there's already an `android` folder in the main directory of the frontend, if so you can skip to step 8. Otherwise we need to add Android to the project.\
   \
   `npx cap add android`\\

7. Now we need to replace the default Capacitor logos/splash screens with the shSMS ones. The following one-liner will move the logo zip to the correct folder and replace the default logos and return your terminal back to the root of the frontend project. You could also manually extract the zip file and replace the contents of `shsms-frontend/android/app/src/main/res` with the contents of the zip, but that doesn't feel as cool imo.\
   \
   `mv android-logos.zip android/app/src/main/res && cd android/app/src/main/res && unzip -o android-logos.zip && rm android-logos.zip && cd ../../../../../`\\

8. Let's create a file to hold our environmental variables. These will be specific to your own personal build and will only be hosted on your machine.\\

   `touch .env`\\

9. Open the `.env` file you just created and add the following, **be sure to update these with your own information.** We've done this before so it should be familiar, but I'll copy/paste the instructions to use nano again in case you forgot. Also, once we put this on our VPS, we won't have the luxury of a desktop environment so this is good practice!

Personally, I prefer to just do it all in the terminal because we're already in there, why bother with all that double-clicking 🤷‍♀

Using the terminal:

* `nano .env`
* Copy/Paste the sample below
* Change the values to match your own info
* `Ctrl + O` (save changes)
* `Enter` (confirm that you want to overwrite the file)
* `Ctrl + X` (exit the Nano text editor)
* `cat .env` (print the file to the screen and make sure your changes are correct and saved)
* `clear` (clear the terminal in case some shady characters walk past you and want to peek at your screen)

Do not use any kind of quotes/spaces/parenthesis around the values after the equal (=) sign

Values to add to the `.env` file:&#x20;

`REACT_APP_KEY_HASH` - Remember that secret key thing we did in the backend? Make sure you add it **exactly** the same here.

`REACT_APP_SMS_SERVER_URL` - The URL to where you will be hosting your server. If using Heroku, add the root path to your app. If self hosting (personal server/raspberry pi/vps/etc), add the location and port. eg: [https://281.23.98.102:4001](https://pywkt.gitbook.io/shsms/heroku-mlab/https:/281.23.98.102:4001)

Your final `.env` should look something like this:

```
REACT_APP_KEY_HASH=THIS_IS_YOUR_SECRET_KEY_IT_CAN_BE_ANYTHING
REACT_APP_SMS_SERVER_URL=https://shsms-heroku-server-01.herokuapp.com
```

####
