DEV Community

Jasmin Virdi
Jasmin Virdi

Posted on • Edited on

Steps to create slack app and deploy it to Digital Ocean

#dohackathon #node #javascript #webdev

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.

Alt Text

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.

Alt Text

  • 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.
    Alt Text

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

ngrok http 8080
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

  • 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.

Alt Text

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.

Alt Text

  • 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
Enter fullscreen mode Exit fullscreen mode
  • Install Node using the following commands. 
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

node --version
Enter fullscreen mode Exit fullscreen mode
  • Clone your project into the server. 
git clone your_project_url
Enter fullscreen mode Exit fullscreen mode
  • Install dependencies in your project after cloning it. Also, try running your project once after setup. 
cd project_folder
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Next we install Ngnix and setup reverse proxy to directly access the app running on your specified port number. 
sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

Check the file is updated correctly by using the following command

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

Restart the ngnix again to apply the settings.

sudo service nginx restart
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Alt Text

  • 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.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode



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!πŸ‘©πŸ»β€πŸ’»

Top comments (5)

Collapse
 
bradtaniguchi profile image
Brad • • Edited

The title is mis-leading.

This bot uses Digital Ocean, but the bot is deployed into a droplet, not into App Platform.

Collapse
 
jasmin profile image
Jasmin Virdi • • Edited

Yes, I agree with you. Thanks for pointing out. Will update itπŸ™Œ

Collapse
 
sasa_kalaba_73e8f32fa7ee3 profile image
Sasa Kalaba •

Still is misleading in 2024 -_-.

Collapse
 
brslv profile image
Borislav Grigorov •

Neat and simple. Thank you for the great article.

Collapse
 
jasmin profile image
Jasmin Virdi •

Thank you so much!πŸ˜‡
I tried to cover all the steps I followed while working on my project.

Read next

pagesword profile image

SvelteKit VS Astro. laidback side by side

Jackie Yio Hex πŸ₯ -

anthonymax profile image

🌷Creating a Gallery App in JavaScript with HMPL

Anthony Max -

asvin profile image

Lessons from My First few Months as an Intern: What I Wish I Knew

ASVIN -

daniel_jones profile image

Start Your Free Database and API Service in Just 10 Minutes！πŸ”₯πŸ”₯πŸ”₯(With GitHub repository)

Daniel Jones -