08.1 Hosting the Server

There are several ways to host the server so it's accessible to us from our devices on the internet. Personally, I like to use Ngrok because it's simple and I haven't had any issues with it. The only catch is that if you're using the free version, your server resets after two hours and the url changes. It could be possible to write a script to start the server, grab the url, update our .env and then restart our SMS server. And do that every two hours or so, or, you could pay $5 a month and have a static url that will never change, the choice is yours really. I'm going to write the next part based on the FREE method, and after that I'll put in the $5 /month configuration.

Another nice thing about ngrok is that it will automatically reconnect if the connection is dropped for whatever reason.

(On the Raspberry Pi)

1. Install ngrock sudo npm install --unsafe-perm -g ngrok

2. Start ngrok on port 4001: ngrok http 4001

And that's it! Kind of too easy after all we've done so far, but yeah. You should see that the server is online and the "Session Expires" is in about two hours from when you started it. There should also be a "Forwarding" row with an https url, we're going to add that to the DEV_SERVER= in our .env

But wait, this ngrok thing is taking up the whole terminal screen and the server stops if I close it! Check this shit out and worry not!

1. Stop the ngrok server: Ctrl + c

2. Start a new tmux session: tmux new -s shSMS

3. Split vertically: Ctrl + b quickly followed by %

Whaaaaaaaaa! Yeah. We did that.

(You should be on the right side now)

1. Switch to the left side: Ctrl + b, o

2. Start ngrok again: ngrok http 4001

3. Switch to the right side: Ctrl + b, o

4. Edit the .env: nano .env

5. Type the https url that ends with .ngrok.io in to the DEV_SERVER= part

6. Save and exit: Ctrl + o, Enter, Ctrl + x

7. Start the server: node server.js

Learn more cool tmux commands here

You should see "Listening on port 4001" and "Database: Connected > mongodb://127.0.0.1:27017" and the left side should be the Ngrok screen if everything went as planned.

We did it! Can you believe it??

We're not reallllyyy all the way there yet though 😑 We just have to update all the places this URL is used and I'm sure you can see why it's beneficial to have a fixed url for this, but hey, we're learning and testing it out!

• Twilio:

  • Log in and go to Explore Products > Functions > Manage Services.

  • Select the service we created previously and just update the baseURL in the axios.create function with this new https ngrok url.

• Frontend folder:

  • Update the REACT_APP_SMS_SERVER_URL in the .env file and rebuild the app/install on device.

In the shsms-frontend folder, run npm start and go to http://localhost:3000 in the browser. You'll probably get an error the first time it loads because there's nothing in the database, this is a known bug and it's on my list, sorry! Just refresh the page and it should be good to go and you should see all the requests coming through on your Raspberry Pi! Send an SMS to any of your Twilio numbers and watch the magic happen!