Steps to create slack app and deploy it to Digital Ocean

I have created a slack app for the Digital Ocean App Platform Hackathon which help slack users to share sensitive messages in the form of QR code and also auto-expire after 30 secs.
In this post, I will be covering all the steps that I followed while creating the app and also the steps I performed to deploy my app on Digital Ocean.

Let's Begin!

I have decided to break this down into sections. First I will cover how we can create a slack app and test it locally. In the second section, I will be covering steps to configure the app on the Digital Ocean Platform.

Create Slack App

• Login to your slack account and go to Create Application page.

• Click on Create New App, a modal asking for your app details will open. Enter the App name and select the workspace where you would want to test the app integration locally. This will generate a bot token which you can use for development purposes.

Click on Create App after adding the details.

• After this you will be redirected to the settings page where you would be required to add features and functionality to your App. Customize your app with suitable settings.

• Next step is to create a node app that runs locally in your machine. Slack has amazing tutorials to create a slack app in different languages and frameworks. I have written the app in Node Js and followed this article to create my app.

• We can use different slack API to interact with the workspace. I have used few Slack APIs to manage resources across the workspace. You can read more about the API and documentation here.

• To increase interaction with slack features you can add scopes to your app in OAuth & Permissions section.
  

• To test the app use ngrok. This will expose your service running locally ready to be consumed over the web.
  

ngrok http 8080

Note- Use the port number on which your app is running

• You can use the HTTPS URL generated from the above command in your slack app to test the feature locally.

• Once your app is running locally you would need to do few integrations before deploying it on Digital Ocean. Since you are using specific bot token and verification details which is helping you test again a particular workspace. To make this available to everyone you need to retrieve the tokens and verification details dynamically using slack auth api.

• Create an auth endpoint in your Node app which will call the slack oAuth API when called internally. Add this URL in your OAuth & Permissions section in the Redirect Url field.

• In your node app use the OAuth API as mentioned here in the documentation.

With this, your app is pretty much in a ready state to be deployed on the Digital Ocean Platform.

Digital Ocean Configuration and Deployment

• Login to your Digital ocean account and click on Create and select Droplet from the dropdown list.

• After creating a droplet you would be asked to configure it by adding your SSH key and giving it a proper hostname. Once done click on Create Droplet to continue and get your IP address.
• Once you get the IP address of your droplet go to the terminal and login to your remote server using the following command

ssh root@IP_ADDRESS

• Install Node using the following commands.

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

node --version

• Clone your project into the server.

git clone your_project_url

• Install dependencies in your project after cloning it. Also, try running your project once after setup.

cd project_folder
npm install
npm start

Once verified your project is running you can stop the app.

• Set up Pm2 process manager to keep your app running in the background.

sudo npm i pm2 -g
pm2 start index.js

• Set up a firewall to block that port. Run the following steps to achieve that.

sudo ufw enable
sudo ufw status
sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https

• Next we install Ngnix and setup reverse proxy to directly access the app running on your specified port number.

sudo apt install nginx

After this, we will update the server block in the default file configuration. Open the file using the following command.

sudo nano /etc/nginx/sites-available/default

update the file with the following code.

server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:8000; #whatever port your app runs on
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

Check the file is updated correctly by using the following command

sudo nginx -t

Restart the ngnix again to apply the settings.

sudo service nginx restart

This app must be running on IP with no port number. Let's add your domain name and SSL certificate so that your app works on HTTPS and your provided domain.

• Go to Digital Ocean account and open Networking page from the manage app section. Add a record for @ and www for your droplet. Like the following shown below and select your droplet you want to map from the dropdown list.

• The final step is to register your domain name. To achieve the final step you need to add the name servers from the Digital Ocean Platform to your domain in the registrar.

Once this is up you can add the SSL certificate.

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# Only valid for 90 days, test the renewal process with
certbot renew --dry-run

NOTE- If you are facing any issue with certbot installation you can use the below command. This issue might occur with Ubuntu 20.04 Focal. Running the below command can resolve the error for you.

curl -o- https://raw.githubusercontent.com/vinyll/certbot-install/master/install.sh | bash

Congratulations!! 🥳 👏
We have completed all the steps and made our app live!

You can now visit your app on your domain.

Hope you enjoyed the article!
Happy Coding!👩🏻‍💻