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:

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

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

Previous05. Clone the Repo (backend)Next07. Run Local Instance

Last updated