An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
Deploying Twitter Post Scheduler Built With React, NodeJS, FaunaDB and Vercel (Part 2)
Introduction
In our first article, we have created a Twitter post scheduler called Twittler with React, Node.js, and Fauna. In this chapter, we will deploy it to the Vercel.
Why Vercel?
Vercel is the best place to deploy any frontend app with zero configuration and scale it dynamically to millions of pages without breaking a sweat. As an addition, we can deploy our backend as serverless functions without any additional configuration. Serverless functions are pieces of code written with backend languages that take an HTTP request and provide a response.
Tools
Before we start, make sure you have:
- A Vercel account where we will deploy our application. You can create it here.
- A Github account as our version control. You can create it here.
- A Cronhub account where our cron job will be located. You can create it here.
Deployment Architecture
Here is how Twittler high-level deployment architecture will look like:
- We push our app to Github using the
git --push
command. - Then Github pushes our code to Vercel automatically.
- Vercel builds it and makes it live.
To create this architecture and bring it to life, we need to:
- Create a Github repository for our application.
- Make small changes in our codebase to make it suitable with Vercel serverless functions.
- Connect our Github repository with Vercel, to automate Github Vercel deployment.
Lets start!
Pushing Twittler to Github
To push our application to Github, first, we need to create a Github repository. Its a place that will contain all of our project's files and each file's revision history. To create a repository follow these steps:
Go to the Create a new repository page.
Add repository name (I used twittler)
Click on the Create repository button.
Weve created a repository! Now, lets push our existing codebase to it. To do it, follow these steps:
- Using your terminal/command line, get inside the folder where your project files are kept:
cd your_path_to_the_application
and press enter. - Type
git remote add origin [[email protected]](mailto:[email protected]):YOUR_GITHUB_USERNAME/REPO_NAME.git
and press enter. - Type
git branch -M main
and press enter. - Type
git add .
and press enter. - Type
git commit -m "first commit"
and press enter. - And finally, type
git push -u origin main
and press enter. It will push our application to Github.
If you are having difficulties with pushing your application, use this guide or official Github recommendations:
To make sure your application is on Github, go to https://github.com/YOUR_GITHUB_NAME/twittler
and check if you see your local files there.
Making our Application Suitable for Vercel
Vercel doesnt support cron jobs at the moment so we will use Cronhub to handle our Twitter posting job, which is located in the server/index.js
file.
With Cronhub, we can create a recurring task that will call our Vercel serverless function every minute and post tweets on Twitter. Basically, we will create an API route that the cron job will call every minute.
This is how our application architecture will change due to that.
From:
To:
Lets start with transforming our server/indiex.js
.
From Express.js to Vercel Serverless Functions
To create and deploy serverless functions without additional configuration, we need to place a file with our Twitter posting functionality, wrapped in an exportable function, in the /api
directory at the root of our project. To do it, follow these steps:
- Go to the root folder of Twittler project.
- Create an
api
folder. - Put there
cron.js
file (you can use any name here). And add to it this code.
const faunadb = require('faunadb')const {TwitterApi} = require('twitter-api-v2')const twitterClient = new TwitterApi(process.env.TWITTER_BEARER_TOKEN)const q = faunadb.queryconst faunaClient = new faunadb.Client({ secret: process.env.REACT_APP_FAUNADB_SECRET,})module.exports = async (req, res) => { if (req.method === 'POST') { try { const now = new Date() now.setSeconds(0) now.setMilliseconds(0) // get all tweets from Now - 1 minute to Now const {data} = await faunaClient.query( q.Map( q.Paginate(q.Match(q.Index('tweetsByDate'), now.getTime())), q.Lambda(['date', 'ref'], q.Get(q.Var('ref'))) ) ) // post all tweets from date range on twitter data.forEach(async ({data: {tweet}}) => { await twitterClient.v1.tweet(tweet) }) res.status(200).json({success: true}) } catch (err) { res.status(500).json({statusCode: 500, message: err.message}) } } else { res.setHeader('Allow', 'POST') res.status(405).end('Method Not Allowed') }}
Creating a cron.js
file in the /api
directory will provide us with an API call https://ourapp.com/api/cron that will post tweets on Twitter.
Deploying to Vercel
Before we deploy our application on Vercel lets push our latest changes to the Github repository. Open terminal, go to the root folder of your project and run:
git add .git commit -m vercel setupgit push -u origin main
Now, lets deploy our application to Vercel:
- Go to the new Vercel project page.
Choose your repository and click the Import button.
Configure your project by adding project name and all environment variables from your
.env.local
file in the project root folder toEnvironment Variables
tab like this:Click on the Deploy button.
Great, our application is live!
The last thing we have to do is create a cron job that will call it every minute.
Moving Cron Job to Cronhub
To move our cron job to Cronhub follow these steps:
Go to Scheduler tab and click on + New Scheduler button
Create your cron job:
You can find your Target HTTP URL at your Vercel domain settings:
Click on the Save button.
We have created our cron job!
You can verify it by going to Shedulers tab:
What this job does is make a POST request to yourdomain.com/api/cron
every minute. The handler function, located on the yourdomain.com/api/cron
, fetches all tweets from Fauna and publishes them to Twitter.
Conclusion
Congratulations! We created and deployed the Twitter scheduler application.
You can find a repository with the final example here.
Written in connection with the Write with Fauna Program.
Original Link: https://dev.to/nickbulljs/deploying-twitter-post-scheduler-built-with-react-nodejs-faunadb-and-vercel-part-2-3npb
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To