![Tom Scott this video has x views](https://ryancarmody-blog.s3.amazonaws.com/like_and_Retweet_5_e97b4cb670.png)

Have you seen [this video by Tom Scott?](https://www.youtube.com/watch?v=BxV14h0kFs0). It's a video by Tom Scott, where the title of the video tells you how many views the video has. Mind blowing!

How is this possible? Well over the last couple of days, I have been on a journey to find out. I figured out that Tom would have made an application, possibly with Nodejs, and connected it with the YouTube Data API to periodically search for the video's stats, and then update them. I ended up [making my own video](https://www.youtube.com/watch?v=lhjiIZCJcOc) which behaves very similar. Here is how I did it.

## Table of contents

- [Step 1: Create OAuth tokens in Google Cloud](#step-1-create-oauth-tokens-in-google-cloud)
- [Step 2: Install Node](#step-2-install-node)
- [Step 3: Create a new node app and install dependencies](#step-3-create-a-new-node-app-and-install-dependencies)
- [Step 4: Create a .env file](#step-4-create-a-env-file)
- [Step 5: Generate an Auth URL](#step-5-generate-an-auth-url)
- [Step 6: Generate a refresh token](#step-6-generate-a-refresh-token)
- [Step 7: Call the YouTube Data API](#step-7-call-the-youtube-data-api)
- [Step 8: Add a Cron job](#step-8-add-a-cron-job)
- [Step 9: Add express](#step-9-add-express)


## Step 1: Create OAuth tokens in Google Cloud

YouTube is owned by Google. There is a central location to sign up for all APIs Google offers, including the YouTube Data API. It is called Google Cloud. Because generating OAuth tokens is quite a lengthy process, I have created [another blog post](https://www.ryancarmody.dev/blog/create-oauth-tokens-in-google-cloud-for-youtube-data-api) with this process. Do that and then go on to Step 2.

## Step 2: Install Node

I am assuming you have Node installed. If not, you will need to [install](https://nodejs.org/en/download/) it.

If you are not sure if you have Node installed, simply run the following in your terminal

```bash
node -v
```
It should say something like

```bash
v16.14.2
```

## Step 3: Create a new node app and install dependencies

Let's go ahead a create a new Node.js app with

```bash
npm init -y
```
This will create our `package.json` file for us. We will now add all the packages we will need for our bot.

```bash
npm install googleapis
npm install dotenv
npm install cron
npm install express
```

## Step 4: Create a `.env` file

As we are using sensitive keys and tokens in our application, we will store them in a `.env` file. Put in the `CLIENT_ID`, `CLIENT_SECRET` and `REDIRECT_URI`, which were generated in Step 1.

```:.env
CLIENT_ID="387632578954-rk2mh4gvg40qh3s7ta5nbpu7e8bm6uam.apps.googleusercontent.com"
CLIENT_SECRET="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"

REDIRECT_URI="http://localhost:3000/callback"
```

**Note**: These keys are sensitve information and I will revoke these before the video/article goes live.

## Step 5: Generate an Auth URL

Before we can start using the API, Google needs permission by the account that requested access. 

Go ahead and generate a file called `auth.js` and add the following code.

```js:auth.js
const { google } = require("googleapis");
require("dotenv").config();

const oauth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT_URI
);

const generateAuthUrl = async () => {
  const scopes = [
    "https://www.googleapis.com/auth/youtube",
  ];

  const url = await oauth2Client.generateAuthUrl({
    access_type: "offline",
    scope: scopes,
  });

  console.log(url);
};

generateAuthUrl();
```

Basically, we are creating a client, and generating an `AuthUrl` which we can then navigate to. Run this application with `node auth.js` and your console should print out a URL that you can navigate to. Click on it and you should be brought to a screen like this. 

![Google consent screen](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_16_0b610575e9.png)

I run a game called [WhereTaken](https://wheretaken.com), and I'll be using that email for this example, **this is also the email that I added as a test user** when generating the OAuth tokens. Follow along the steps and give access to this app. It will eventually redirect you to your `REDIRECT_URI`, in our case `http://localhost:3000/callback.

In the URL that you have been redirected to, you will notice that there is a code in the query string

![Code in query string](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_18_9d4641f9c9.png)

We need to extract that code from the URL as we will need it to create a refresh token.

I used the [URL parser tool on freeformatter.com](https://www.freeformatter.com/url-parser-query-string-splitter.html). It extracted the code from the URL, here it is

![Code in string](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_19_40593d0fe6.png)

Save this code somewhere as we need it in the next step.

## Step 6: Generate a refresh token

With the code from Step 4, we can create a set of tokens, one of these being a `Refresh Token`. Basically, whenever we want to use the API, we need to create an `Access Token`. How do we do that? We do it with our `Client ID`, `Client Secret` and `Refresh Token`.

Create a file called refresh.js and add the following code

```js:refresh.js
const { google } = require("googleapis");
require("dotenv").config();

const oauth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT
);

const getTokens = async () => {
  const res = await oauth2Client.getToken(
    "4/0Af90PXvutvmRviuP6d8H3lPkGkgRTWBDGiKKcQA9xg_ireF4H1NGoywlb_Bwc7NwbVxM0Og"
  );
  console.log(res.tokens);
};

getTokens();
```

We are going to call the `getToken` method, which will return an `access_token` and a `refresh_token`. We only need the `refresh_token`. Copy the `refresh_token` into a new environment variable called `REFRESH_TOKEN`.

Your `.env` file should now look something like this.

```:.env
CLIENT_ID="387632578954-rk2mh4gvg40qh3s7ta5nbpu7e8bm6uam.apps.googleusercontent.com"
CLIENT_SECRET="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"
REFRESH_TOKEN="1//0g7LW-gz-TVGrCgYIARAAGBASNwF-L9IrvdjjIio5xkDTP_T3UPIcb2H9uB0k453_SIWNaY_7-p6XBVJkR5JdN6yZriOr16YF8_g"
```

## Step 7: Call the YouTube Data API

It is time to call the API! 

The first thing we need to do is search for the video, that way we can extract the amount of views that this video has. Then we can go ahead and update the video. Create a file called `index.js` and paste the following code

```js:index.js
const { google } = require("googleapis");
require("dotenv").config();

const oauth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT
);

const updateVideo = async () => {
  oauth2Client.setCredentials({ refresh_token: process.env.REFRESH_TOKEN });

  // YouTube client
  const youtube = google.youtube({
    version: "v3",
    auth: oauth2Client,
  });

  try {
    // Get video
    const result = await youtube.videos.list({
      id: "lhjiIZCJcOc", // <-- ID of video 
      part: "statistics,snippet",
    });

    if (result.data.items.length > 0) {
      const stats = result.data.items[0].statistics;
      
      // Update the video
      await youtube.videos.update({
        part: "snippet",
        requestBody: {
          id: "lhjiIZCJcOc",
          snippet: {
            title: `This video has ${stats.viewCount} views`,
            categoryId: 28,
          },
        },
      });
    }
  } catch (error) {
    console.log(error);
  }
};

updateVideo();

```

Now you can go back to your video and see if the title has been updated. If you did all these steps right it should be!

## Step 8: Add a Cron job

We want to run the `updateVideo` function every 8 minutes. I chose 8 minutes as there is a limit of 10000 requests per day using the YouTube Data API and updating a video costs 50 API credits. 

We can easily achieve this with cron jobs.

Here is an updated code snippet with the cron job added.

```js:index.js
const { google } = require("googleapis");
require("dotenv").config();
const CronJob = require("cron").CronJob;

const oauth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT
);

const updateVideo = async () => {
  oauth2Client.setCredentials({ refresh_token: process.env.REFRESH_TOKEN });

  // YouTube client
  const youtube = google.youtube({
    version: "v3",
    auth: oauth2Client,
  });

  try {
    // Get video
    const result = await youtube.videos.list({
      id: "lhjiIZCJcOc", // <-- ID of video
      part: "statistics,snippet",
    });

    if (result.data.items.length > 0) {
      const stats = result.data.items[0].statistics;

      await youtube.videos.update({
        part: "snippet",
        requestBody: {
          id: "lhjiIZCJcOc",
          snippet: {
            title: `This video has ${stats.viewCount} views`,
            categoryId: 28,
          },
        },
      });
    }
  } catch (error) {
    console.log(error);
  }
};

const updateEvery8Mins = new CronJob("*/8 * * * * *", async () => {
  updateVideo();
});

updateEvery8Mins.start();
```

## Step 9: Add express

If you want to host this application on a hosting platform like [heroku](https://heroku.com/), you will need to add express to your node.js app. This is because when hosting node.js applications, they need a process to attach to. 

To do that, simply add the following to your `index.js` file.

```js:index.js
const express = require('express')
const app = express()
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})
```

Your final `index.js file should look like this
```js:index.js
const { google } = require("googleapis");
require("dotenv").config();
const CronJob = require("cron").CronJob;

const express = require("express");
const app = express();
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

const oauth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT
);

const updateVideo = async () => {
  oauth2Client.setCredentials({ refresh_token: process.env.REFRESH_TOKEN });

  // YouTube client
  const youtube = google.youtube({
    version: "v3",
    auth: oauth2Client,
  });

  try {
    // Get video
    const result = await youtube.videos.list({
      id: "lhjiIZCJcOc", // <-- ID of video
      part: "statistics,snippet",
    });

    if (result.data.items.length > 0) {
      const stats = result.data.items[0].statistics;

      await youtube.videos.update({
        part: "snippet",
        requestBody: {
          id: "lhjiIZCJcOc",
          snippet: {
            title: `This video has ${stats.viewCount} views`,
            categoryId: 28,
          },
        },
      });
    }
  } catch (error) {
    console.log(error);
  }
};

const updateEvery8Mins = new CronJob("*/8 * * * * *", async () => {
  updateVideo();
});

updateEvery8Mins.start();
```

And that is it, your application to update the title of a YouTube video with the amount of views is complete. All that is left to do now is host your application on your favourite hosting platform and watch the views go up!



In this tutorial, I will show you how Tom Scott created his 'This video has X views' video. I will be using the YouTube Data API and Node.js

Before we start interacting with Google services through their API, e.g. Update a YouTube video's title, we first need to generate our OAuth tokens in Google Cloud.

Head over to [Google Cloud Console](https://console.cloud.google.com/) to get started. You may need to sign in. You should eventually land on this page.

![Google Cloud Console](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_1_19b7f3b1e2.png)

Once you arrive there, click on `Select a project` and then `New Project`.

![Select a project](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_2_c613eb68cc.png)

Give your project a name and assign a location. I have left it as `No organization`, then click `Create`

![Give the project a name](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_3_c8762c9855.png)

You'll be taken to the following screen. Click on `Enabled APIs & Services under `APIs & Services`.

![Enable APIs](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_4_37d9b5d687.png)

It will bring you to the following page. On that page, click on `Enable APIs and Services`

![Enable the API](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_5_a6ce31731c.png)

From there, let's search for `YouTube Data API v3`. Click on that when it is displayed in the results. 

![Search to the Youtube V2 API](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_7_a13804d848.png)

Click `Enable`.

![Click Enable](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_8_4ed3a0042c.png)

You will be brought to the `YouTube Data API v3` homepage. The API has been enabled but we also need to create our credentials i.e. The OAuth Tokens. Click on `Create Credentials`.

![Create credentials](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_9_b6e048d8d9.png)

There is a number of sections we need to go through to create our credentials. First, let set the data that we want to access as `User data`. If it was public data, then we would simply need an API key.

After that, fill in your details under the `OAuth Consent Screen`.

![User Data select](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_10_ab4dbec347.png)

Then we have to add our scopes. This is the section where we tell Google what sections of the API we want to use. Click on `Add or Remove Scopes`, and scroll across to the two that are selected in the image below. Select them. 

![Scopes to select](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_11_bfb6012568.png)

Next, we need to fill the section under `OAuth Client ID`. Let's select `Web Application` for our application type, give our app a `Name`, set our `Authorized JavaScript Origins`, basically where our requests are coming from and our `Authorized Redirect URIs`.

![OAuth Client ID](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_12_20662bd9a1.png)

We can set the redirect to simply `http://localhost:3000/callback`. We can then click `Create` and it will go ahead and create our credentials. 

![Set the redirect uri and create tokens](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_14_c7fc458e17.png)

It will give you your `Client ID`, you will have to go ahead and click `Download`, which will be a JSON object with all your tokens, including your `Client secret`.

![Your OAuth tokens](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_15_c396f02b10.png)

Finally, we need to add a test user. Back in Google Cloud, click on the `OAuth consent`, then scroll down to `Test User` and click `Add Users`, and add in the email address of your gmail account.

![My project-1 (17).png](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_17_42bbf4bf14.png)

And that is it! You have created your OAuth Tokens, in Google Cloud for the YouTube Data API.


In this tutorial, I will show you how to create your OAuth tokens for the Google API, so we can interact with the Youtube API

![Automate instagram posts](https://ryancarmody-blog.s3.amazonaws.com/like_and_Retweet_4_32ef1e2eea.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=wOS_d7AfGFg" />

## Table of contents
- [Step 1: Install Node](#step-1-install-node)
- [Step 2: Create a new node app and install dependencies](#step-2-create-a-new-node-app-and-install-dependencies)
- [Step 3: Create a .env file with your Instagram username and password](#step-3-create-a-env-file-with-your-instagram-username-and-password)
- [Step 4: Login to Instagram using instagram-private-api](#step-4-login-to-instagram-using-instagram-private-api)
- [Step 5: Download the image into a buffer, ready for upload](#step-5-download-the-image-into-a-buffer-ready-for-upload)
- [Step 6: Post to Instagram](#step-6-post-to-instagram)
- [Step 7: Create a cron job](#step-7-create-a-cron-job)
- [Step 8: Add express (optional)](#step-8-add-express-optional)

## Step 1: Install Node
I am assuming you have Node installed. If not, you will need to [install](https://nodejs.org/en/download/) it.

If you are not sure if you have Node installed, simply run

```bash
node -v
```
It should say something like

```bash
v16.14.2
```

## Step 2: Create a new node app and install dependencies
Let's go ahead a create a new Node.js app with

```bash
npm init -y
```
This will create our `package.json` file for us. We will now add all the packages we will need for our bot.

```bash
npm install instagram-private-api
npm install request-promise
npm install dotenv
npm install cron
npm install express
```

## Step 3: Create a `.env` file with your Instagram username and password

Go ahead and create a `.env` file that has your username and password for the account you'd like to post to. We will use these in our application.

```:.env
IG_USERNAME="<your-username>"
IG_PASSWORD="<your-password>"
```

## Step 4: Login to Instagram using `instagram-private-api`

Create a file called `index.js` and require the necessary packages

```js:index.js
require("dotenv").config();
const { IgApiClient } = require('instagram-private-api');
const { get } = require('request-promise');
```

Then, we will create a new async function called `postToInsta`, and add the code to log-in to Instagram

```js:index.js
const postToInsta = async () => {
    const ig = new IgApiClient();
    ig.state.generateDevice(process.env.IG_USERNAME);
    await ig.account.login(process.env.IG_USERNAME, process.env.IG_PASSWORD);
}
```

## Step 5: Download the image into a buffer, ready for upload

We now need to download our image from its source, and store it in a buffer. **Note:** If your image is already on your file system, and not hosted somewhere, you can [follow the code in the official docs](https://github.com/dilame/instagram-private-api/blob/23bf2b451dbc219eae6ed09fbc1a73a872528093/examples/upload-photo.example.ts). The process is very similar.

Go ahead and add the following to your `postToInsta` function

```js:index.js
const postToInsta = async () => {
    ...
    const imageBuffer = await get({
        url: 'https://i.imgur.com/BZBHsauh.jpg',
        encoding: null, 
    });
}
```

## Step 6: Post to Instagram

All we need to do now is to post our image to Instagram

Add the following code to your `postToInsta` function

```js:index.js
const postToInsta = async () => {
    ...
    await ig.publish.photo({
        file: imageBuffer,
        caption: 'Really nice photo from the internet!', // nice caption (optional)
    });
}
```
The `photo` method takes and object with different parameters. In this example, we are adding the file (mandatory) and the caption (optional). There are a number of other parameters we could add, [have a look at this example](https://github.com/dilame/instagram-private-api/blob/23bf2b451dbc219eae6ed09fbc1a73a872528093/examples/upload-photo.example.ts) to see what else you can add.

## Step 7: Create a cron job

Generally, an application like this would post on a regular schedule, for example, every day. We can build on what we already have and add a cron job to our application. To do this, add the following line of code to the top of the `index.js` file.

```js:index.js
const CronJob = require("cron").CronJob;
```

To create a cron job, we add the following

```js:index.js
const cronInsta = new CronJob("30 * * * * *", async () => {
    postToInsta();
});

cronInsta.start();
```

What does this code do? It creates a cron job that will run when seconds are at 30, not every 30 seconds. I won't go into detail about what the 30 and stars mean, but have a look at [this page which goes through what that syntax does](https://www.netiq.com/documentation/cloud-manager-2-5/ncm-reference/data/bexyssf.html). Similarly, there is this [very handy online tool](https://crontab.guru/) where you can build and edit cron syntax and it will tell you exactly when it will run.

Your final code for this section should look like
```js:index.js
require("dotenv").config();
const { IgApiClient } = require('instagram-private-api');
const { get } = require('request-promise');
const CronJob = require("cron").CronJob;

const postToInsta = async () => {
    const ig = new IgApiClient();
    ig.state.generateDevice(process.env.IG_USERNAME);
    await ig.account.login(process.env.IG_USERNAME, process.env.IG_PASSWORD);

    const imageBuffer = await get({
        url: 'https://i.imgur.com/BZBHsauh.jpg',
        encoding: null, 
    });

    await ig.publish.photo({
        file: imageBuffer,
        caption: 'Really nice photo from the internet!',
    });
}

const cronInsta = new CronJob("30 * * * * *", async () => {
    postToInsta();
});

cronInsta.start();
```

## Step 8: Add express (optional)
If you want to host this application on a hosting platform like [heroku](https://heroku.com/), you will need to add express to your node.js app. This is because when hosting node.js applications, they need a port to attach to. 

To do that, simply add the following to your `index.js` file.

```js:index.js
const express = require('express')
const app = express()
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})
```

Your final `index.js file should look like this
```js:index.js
require("dotenv").config();

const express = require('express')
const app = express()
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})

const { IgApiClient } = require('instagram-private-api');
const { get } = require('request-promise');
const CronJob = require("cron").CronJob;

const postToInsta = async () => {
    const ig = new IgApiClient();
    ig.state.generateDevice(process.env.IG_USERNAME);
    await ig.account.login(process.env.IG_USERNAME, process.env.IG_PASSWORD);

    const imageBuffer = await get({
        url: 'https://i.imgur.com/BZBHsauh.jpg',
        encoding: null, 
    });

    await ig.publish.photo({
        file: imageBuffer,
        caption: 'Really nice photo from the internet!',
    });
}

const cronInsta = new CronJob("30 5 * * *", async () => {
    postToInsta();
});

cronInsta.start();
```

And that is it, your application to post to Instagram using node.js has been created. All that is left to do now is host your application on your favourite hosting platform.

In this tutorial, I will show you how to automate posting to Instagram in just a few steps

![Elon musk thumbs up](https://ryancarmody-blog.s3.amazonaws.com/like_and_Retweet_1_07aa875dd2.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=SVt8eTdVbsw" />

In this final Twitter API tutorial, I will show you how to like and retweet using the Twitter API.

## Table of contents
- [Further look at the documentation](#further-look-at-the-documentation)
- [Step 1: Search for tweets](#step-1-search-for-tweets)
- [Step 2: Like tweets](#step-2-like-tweets)
- [Step 3: Retweet a tweet](#step-3-retweet-a-tweet)

## Further look at the documentation

After this final tutorial, you should be able to do everything you want using the API. Have a look at the [documentation here](https://github.com/plhery/node-twitter-api-v2/blob/HEAD/doc/v2.md) and you can search for what you want to do.

For example, if we wanted to delete a tweet, we could go to this section of the docs and follow the instructions

![Delete a tweet](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_2_e74300b925.png)

## Step 1: Search for tweets

Searching for tweets is easy. For this step, we will use the `twitterBearer` we created in [the previous blog post](https://www.ryancarmody.dev/blog/creating-a-twitter-bot-with-nodejs-api).

We can then add the following to our `index.js` file.

```js:index.js
const whereTakenTweets = await twitterBearer.v2.search('#WhereTaken There were');

for await (const tweet of whereTakenTweets) {
    console.log(tweet);
}
```

In my console, it has found the latest 10 tweets that match this criteria, and it has sent back the contents of the tweet under `text` and the `id`. Don't worry about the `edit_history_tweet_ids`, that is not needed.

![Where taken tweet history](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_3_e2f4d0cd93.png)

Now we have the tweets, we can start liking and retweeting them!

## Step 2: Like tweets

To like a tweet, it is very simple, we need to call the following

```js
await client.v2.like('<APP_ID>', '<TWEET_ID>');
```
The `APP_ID` should be an environment variable, as we created this in the previous tutorial. The `TWEET_ID` is the id that was sent back in step 1.

If we wanted to like all of the tweets we found we could do

```js:index.js
const like = async () => {
    const whereTakenTweets = await twitterBearer.v2.search('#Worldle');

    for await (const tweet of whereTakenTweets) {
        await twitterClient.v2.like(process.env.APP_ID, tweet.id);
    }
}
```

## Step 3: Retweet a tweet

Retweeting is very similar to liking. All we need to do is call the `retweet` method.

If we wanted to retweet the first tweet we found while searching, we could do this

```js:index.js
const retweet = async () => {
    const whereTakenTweets = await twitterBearer.v2.search('#WhereTaken There were');

    const tweetID = whereTakenTweets.data.data[0].id;
    await twitterClient.v2.retweet(process.env.APP_ID, tweetID);
}
```

And there you have it. You should now be in a position where you can make whatever Twitter bot you like using these tutorials and the documentation.

This will be the last tutorial on how to create Twitter bots using the v2 Twitter API. I'll show you how to like and retweet tweets.

![Tweet images using v2 API](https://ryancarmody-blog.s3.amazonaws.com/build_a_twitter_bot_3_f9592d8a8d.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=6ecUeGy5Td4" />

In this tutorial, I will show you how to tweet out an image using the v2 Twitter API.

This tutorial follows on from [Creating a Twitter bot with Node.js and Twitter API](https://www.ryancarmody.dev/blog/creating-a-twitter-bot-with-nodejs-api), I recommend going through that first to get set up sending a simple tweet.

## Table of contents
- [Step 1: Install required packages](#step-1-install-required-packages)
- [Step 2: Create a utilities.js file and add the download() function](#step-2-create-a-utilitiesjs-file-and-add-the-download-function)
- [Step 3: Upload the image to Twitter and tweet it](#step-3-upload-the-image-to-twitter-and-tweet-it)

## Step 1: Install required packages
We will need a couple more packages for tweeting images. Go ahead and run the following
```bash
npm install fs
npm install request
```
The first package is so we can interact with the file system and the second in for making requests.

## Step 2: Create a `utilities.js` file and add the `download()` function

When we want to tweet an image, we first have to upload the image to the Twitter servers. When we do that, it will return a `mediaId`, which we can then use when creating a tweet with an image. 

If the images you will be tweeting are in the same file system, then you can skip the following. If they are hosted on a third party platform e.g. [Imgur](https://imgur.com/), then you will need to first download it, upload it to the Twitter servers, then use the `mediaId` it sends back to tweet the image. 

Follow the steps below to download the image onto the file system.

Go ahead and create a `utilities.js` and paste the following code

```js:utilities.js
const request = require("request");
const fs = require("fs");

const download = function (uri, filename, callback) {
  request.head(uri, function (err, res, body) {
    request(uri).pipe(fs.createWriteStream(filename)).on("close", callback);
  });
};

module.exports = { download };
```

## Step 3: Upload the image to Twitter and tweet it

Let's go ahead and call the `download` function so we can download the image on the local file system, then upload the image to Twitter, and finally tweet out the image.

In this example, I have an image of Ukraine hosted on Imgur I am using. 

Add the following to your `index.js` file

```js:index.js
const { download } = require("./utilities");

const tweet = async () => {

    const uri = "https://i.imgur.com/Zl2GLjnh.jpg";
    const filename = "image.png";

    download(uri, filename, async function(){
        try {
            const mediaId = await twitterClient.v1.uploadMedia("./image.png");
            await twitterClient.v2.tweet({
                text: "Hello world! This is an image in Ukraine!",
                media: {
                    media_ids: [mediaId]
                }
            });
        } catch (e) {
            console.log(e)
        }
    });
}
```

Your final `index.js` file will look like this

```js:index.js
require("dotenv").config({ path: __dirname + "/.env" });
const { twitterClient } = require("./twitterClient.js");
const CronJob = require("cron").CronJob;
const express = require('express')
const app = express()
const port = process.env.PORT || 4000;
const { download } = require("./utilities");

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})

const tweet = async () => {

    const uri = "https://i.imgur.com/Zl2GLjnh.jpg";
    const filename = "image.png";

    download(uri, filename, async function(){
        try {
            const mediaId = await twitterClient.v1.uploadMedia("./image.png");
            await twitterClient.v2.tweet({
                text: "Hello world! This is an image in Ukraine!",
                media: {
                    media_ids: [mediaId]
                }
            });
        } catch (e) {
            console.log(e)
        }
    });
}

const cronTweet = new CronJob("*/30 * * * * *", async () => {
    tweet();
});
  
cronTweet.start();
```

You can now go ahead an run the node.js application and it will tweet out your message plus your image.

In this blog post, I will show you how to tweet out images using the v2 twitter API.

![Elon Musk - Make a Twitter Bot](https://ryancarmody-blog.s3.amazonaws.com/build_a_twitter_bot_2_2fe0895d0b.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=LCydSB7JcHw" />

Before we start, make sure you are set up with all API keys and tokens from the [Twitter Developer Platform](https://developer.twitter.com/). If you are not, I have a tutorial on [how to generate your keys and tokens for the Twitter API](https://www.ryancarmody.dev/blog/generate-twitter-api-keys-and-tokens).

## Table of contents
- [Step 1: Install Node](#step-1-install-node)
- [Step 2: Create a new node app and install dependencies](#step-2-create-a-new-node-app-and-install-dependencies)
- [Step 3: Create an .env file and load in your API keys](#step-3-create-an-env-file-and-load-in-your-api-keys)
- [Step 4: Create a Twitter client](#step-4-create-a-twitter-client)
- [Step 5: Create an index.js file and call the Twitter API](#step-5-create-an-indexjs-file-and-call-the-twitter-api)
- [Step 6: Create a cron job](#step-6-create-a-cron-job)
- [Step 7: Add express (optional)](#step-7-add-express-optional)

## Step 1: Install Node
I am assuming that if you are at the level of making Twitter Bots, you have Node installed. If not, you will need to [install](https://nodejs.org/en/download/) it.

If you are not sure if you have Node installed, simply run

```bash
node -v
```
It should say something like

```bash
v16.14.2
```

## Step 2: Create a new node app and install dependencies
Let's go ahead a create a new Node.js app with

```bash
npm init -y
```
This will create our `package.json` file for us. We will now add all the packages we will need for our bot.

```bash
npm install twitter-api-v2
npm install dotenv
npm install cron
npm install express
```

## Step 3: Create an `.env` file and load in your API keys

Create a file called `.env`. This is where the API keys and tokens we generate will go. 

Here is an example of a `.env` file. Replace the values with your values you created on the Twitter developer platform.

```bash:.env
NODE_ENV="development"
API_KEY="<your-API-key>"
API_SECRET="<your-API-secret>"
ACCESS_TOKEN="<your-access-token>"
ACCESS_SECRET="<your-access-secret>"
BEARER_TOKEN="<your-bearer-token>"

APP_ID="<your-app-id>"
```

Your `APP_ID` is just the first section of the `ACCESS_TOKEN`. 
E.g. If your `ACCESS_TOKEN` is 
```bash
1587638141888131111-ZbcwdlkfDZjfsdfasdfdff32HJBSdjd
```
then your `APP_ID` is the section before the dash 
```bash
1587638141888131111
```

## Step 4: Create a Twitter client

Using the `twitter-api-v2` package we installed in step 2, we will create a client. Create a new file called `twitterClient.js` and enter the following code.

```js:twitterClient.js
const { TwitterApi } = require("twitter-api-v2");

const client = new TwitterApi({
  appKey: process.env.API_KEY,
  appSecret: process.env.API_SECRET,
  accessToken: process.env.ACCESS_TOKEN,
  accessSecret: process.env.ACCESS_SECRET,
});

const bearer = new TwitterApi(process.env.BEARER_TOKEN);

const twitterClient = client.readWrite;
const twitterBearer = bearer.readOnly;

module.exports = { twitterClient, twitterBearer };
```

We will use the `twitterBearer` to read tweets, and the `twitterClient` to write to the platform e.g. likes, posts etc.

## Step 5: Create an `index.js` file and call the Twitter API

Let's go ahead and create an `index.js` file. This is where we will run our app from. Add the following code

```js:index.js
require("dotenv").config({ path: __dirname + "/.env" });
const { twitterClient } = require("./twitterClient.js")

const tweet = async () => {
  try {
    await twitterClient.v2.tweet("Hello world!");
  } catch (e) {
    console.log(e)
  }
}

tweet();
```

The above code will import the `twitterClient` and tweet out "Hello world!". You can now go to Twitter and check whether the tweet was actually sent.

Here is my twitter just after I ran the above code.

![Twitter after an automated tweet](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_7_c3a5a4a9aa.png)

## Step 6: Create a cron job

Generally, a Twitter bot will tweet out certain information on a regular schedule, for example, every week. We can build on what we already have and add a cron job to our application. To do this, add the following line of code to the top of the `index.js` file.

```js:index.js
const CronJob = require("cron").CronJob;
```

To create a cron job, we add the following

```js:index.js
const cronTweet = new CronJob("30 * * * * *", async () => {
  tweet();
});

cronTweet.start();
```

What does this code do? It creates a cron job that will run when seconds are at 30, not every 30 seconds. I won't go into detail about what the 30 and stars mean, but have a look at [this page which goes through what that syntax does](https://www.netiq.com/documentation/cloud-manager-2-5/ncm-reference/data/bexyssf.html). Similarly, there is this [very handy online tool](https://crontab.guru/) where you can build and edit cron syntax and it will tell you exactly when it will run.

Your final code for this section should look like
```js:index.js
require("dotenv").config({ path: __dirname + "/.env" });
const { twitterClient } = require("./twitterClient.js")
const CronJob = require("cron").CronJob;

const tweet = async () => {
  try {
    await twitterClient.v2.tweet("Hello world!");
  } catch (e) {
    console.log(e)
  }
}

const cronTweet = new CronJob("30 * * * * *", async () => {
  tweet();
});

cronTweet.start();
```

## Step 7: Add express (optional)
If you want to host this Twitter bot on a hosting platform like [heroku](https://heroku.com/), you will need to add express to your node.js app. This is because when hosting node.js applications, they need a port to attach to. 

To do that, simply add the following to your `index.js` file.

```js:index.js
const express = require('express')
const app = express()
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})
```

Your final `index.js file should look like this
```js:index.js
require("dotenv").config({ path: __dirname + "/.env" });
const express = require('express')
const app = express()
const port = process.env.PORT || 4000;
const { twitterClient } = require("./twitterClient.js")
const CronJob = require("cron").CronJob;

app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})

const tweet = async () => {
  try {
    await twitterClient.v2.tweet("Hello world!");
  } catch (e) {
    console.log(e)
  }
}

const cronTweet = new CronJob("30 * * * * *", async () => {
  tweet();
});

cronTweet.start();
```

And that is it, your Twitter bot has been created. All that is left to do now is host your application on your favourite hosting platform.


In this tutorial, I will should you how to create a simple Twitter bot in Node.js using the Twitter v2 API.

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=LCydSB7JcHw" />

Before you create a Twitter bot, you first need to generate all the required keys and tokens. 

## Table of contents
- [Step 1: Head over to the Twitter Developer Platform](#step-1-head-over-to-the-twitter-developer-platform)
- [Step 2: Set up user authentication settings](#step-2-set-up-user-authentication-settings)
- [Step 3: Generate Access Token and Secret](#step-3-generate-access-token-and-secret)

## Step 1: Head over to the Twitter Developer Platform
You will first need a regular Twitter account. Once you have one, you can go to the [Twitter Developer Platform](https://developer.twitter.com/).

Once there, click on the **Developer Portal** button next to your image at the top right hand corner. 

![Developer Portal](https://ryancarmody-blog.s3.amazonaws.com/ASDF_1171fe310a.png)

Twitter may prompt you to have a valid email and/or phone number on your account. It may also ask you why you want to use the Twitter API, you can just enter 'exploring the API'. Enter these in. You should eventually arrive at this page.

![Welcome to the Twitter Developer Platform](https://ryancarmody-blog.s3.amazonaws.com/1_b069f554ac.png)

Enter a name for your application, and click **Get Keys**. You should be shown a page similar to this, with an API key, API key secret, and Bearer Token. Copy them all into a safe place. Then click **Dashboard**.

![API keys and bearer token](https://ryancarmody-blog.s3.amazonaws.com/2_dc2b75db2c.png)

## Step 2: Set up user authentication settings

On the dashboard, click the cog icon under Project App.

![Click the cog icon](https://ryancarmody-blog.s3.amazonaws.com/2something_58ddfb4f5a.png)

Then click on **Set Up**, under User Authentication Settings. 

![User Authentication Settings](https://ryancarmody-blog.s3.amazonaws.com/2_91_10e8ea14e5.png)

This will take you to a page where we can change a number of settings. Under App permissions, we will select **Read and Write**, under Type of App we will select **Web App, Automated App or Bot**. 

![Set read and write and type of app](https://ryancarmody-blog.s3.amazonaws.com/2_93_924b698e28.png)

Under the callback URI, enter **http://192.168.1.101:3000**, which is essentially http://localhost:3000, and finally, enter your/any website URL. Then click **Save**.

![Enter callback url and website](https://ryancarmody-blog.s3.amazonaws.com/2_94_17b91b01e7.png)

## Step 3: Generate Access Token and Secret

Click on the **Keys and tokens** tab.

![Keys and tokens](https://ryancarmody-blog.s3.amazonaws.com/ag_1e5bb0fc06.png)

Once there, click on the **Generate** button for Access Token and Secret. In the image below, it says **Regenerate**, this is because I had previously generated keys. 

![Generate access token and secret](https://ryancarmody-blog.s3.amazonaws.com/3_c8539168f4.png)

This will generate your Access Token and Access Token Secret. Save these in a safe place. 

Once you have done this, the message below the Access Token and Secret should say **Created with Read and Write permissions**. If it doesn't, this means that you did not click **Read and Write** in step 2.

![Read and write access](https://ryancarmody-blog.s3.amazonaws.com/2_97_a88008a4b9.png)

Now you should be done! You should have a **API Key, API Key Secret, Bearer Token, Access Token** and **Access Token Secret**. 

You would have also generated a **Client ID** and **Client Secret**. You will not need these for the following tutorials on creating twitter bots.


In this article, I will show you how to get set up with all the keys and tokens in the Twitter Developer platform. 

![Code blocks with syntax highlighting in Next.js](https://ryancarmody-blog.s3.amazonaws.com/White_Decorative_Daily_Vlog_Youtube_Thumbnail_1_365f7f4093.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=BNCrfJKnhJI" />

## Table of contents
- [Prerequisites](#prerequisites)
- [Step 1: Serialize your markdown with next-mdx-remote](#step-1-serialize-your-markdown-with-next-mdx-remote)
- [Step 2: Install rehype-prism-plus and rehype-code-titles packages](#step-2-install-rehype-prism-plus-and-rehype-code-titles-packages)
- [Step 3: Add mxdOptions to your serialize function](#step-3-add-mxdoptions-to-your-serialize-function)
- [Step 4: Add a Prism.js theme](#step-4-add-a-prismjs-theme)
- [Step 5: Add a code block to your markdown](#step-5-add-a-code-block-to-your-markdown)

## Prerequisites

I will be adding code blocks with syntax highlighting to the blog that I built in the tutorial video [How to make a blog with Next.js, Strapi and GraphQL](https://www.youtube.com/watch?v=jF4_yiO3HVc). You can also view the [source code](https://github.com/rjc23/make-a-blog) of the blog.

The blog uses the [next-mdx-remote](https://www.npmjs.com/package/next-mdx-remote) package which serializes the markdown from a Strapi CMS. You may also have your markdown files locally in your project e.g. `my-first-blog-post.mdx`. This tutorial will still work for you.

If you have not set up your project using `next-mdx-remote`, don't worry, step one will take you through it.

## Step 1: Serialize your markdown with `next-mdx-remote`

If you have not got `next-mdx-remote` installed, run the following in your terminal

```bash
 npm install next-mdx-remote
```
OR if using yarn
```bash
yarn add next-mdx-remote
```

There are multiple ways to convert markdown from a CMS or file system to JSX. For this tutorial, we are using the `serialize` function from `next-mdx-remote`. Here is a snippet from the `getStaticProps()` function. This example is using GraphQL to pull down content from a CMS, but you might be pulling the markdown in from other sources.

```jsx:[slug].js
export async function getStaticProps({ params }) {

    // Get data using GraphQL (This could also be REST API or local mdx files)
    const { data } = await client.query({
        query: GET_INDIVIDUAL_POST,
        variables: { slugUrl: params.slug }
    });

    const attrs = data.blogPosts.data[0].attributes;

    // Serialize the markdown
    const html = await serialize(attrs.content);

    return {
        props: {
            post: {
                title: attrs.title,
                content: html
            }
        }
    }
}
```

Then in the component we can put

```jsx:[slug].js
export default function Post({ post }) {
    return (
        <div>
            <h1>{post.title}</h1>
            <MDXRemote {...post.content} />
        </div>
    )
}
```

The only code, other than CSS we need to change is the following from the snippet above.

```jsx:[slug].js
    // Serialize the markdown
    const html = await serialize(attrs.content);
```

## Step 2: Install `rehype-prism-plus` and `rehype-code-titles` packages

We are going to need to install two packages. You can do that by running the following

```bash
npm install rehype-prism-plus
npm install rehype-code-titles
```
OR if you're using yarn
```bash
yarn add rehype-prism-plus
yarn add rehype-code-titles
```

## Step 3: Add mxdOptions to your serialize function

First import the packages into `[slug].js`, or wherever you serialize your markdown
```jsx:[slug].js
import rehypePrism from 'rehype-prism-plus';
import rehypeCodeTitles from 'rehype-code-titles';
```

then add the following `rehypePlugins` to `mdxOptions` in the `serialize` function

```jsx:[slug].js
    const html = await serialize(attrs.content, { mdxOptions: {
        rehypePlugins: [
            rehypeCodeTitles,
            rehypePrism
        ]
    } });
```

## Step 4: Add a Prism.js theme

You need to add a Prism.js theme, which is just a single CSS file, to your project. Check out this [long list of Prism.js themes](https://github.com/PrismJS/prism-themes). Choose one and add the CSS styles to your project so they are available globally.


## Step 5: Add a code block to your markdown

Code blocks are added in markdown with three back ticks (`). Here is an example

````
## Lets code a for loop in C++

In this tutorial, we will loop through a for loop and print out the values of i

```cpp:main.cpp
for(int i = 0; i < 10; i++) {
     std::cout << i << std::endl;
}
```
````

Notice how we add the language we are using, separated by a colon, then the file name (optional). Prism.js supports a number of [different programming languages](https://prismjs.com/#supported-languages).

The output from the code block in the above section is

```cpp:main.cpp
for(int i = 0; i < 10; i++) {
     std::cout << i << std::endl;
}
```

That's it! You have now successfully added code blocks with syntax highlighting to your Next.js blog!

In this short tutorial, we will add code blocks with syntax highlighting to a markdown Next.js blog using the Prism.js library.

![Ryan Carmody personal projects](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_3_e5dbc95e5b.png)

Most of the time, I am chipping away at a personal coding project. I love working on these as I get to complete a something from end to end, including the design, development, deployment and maintenance. These projects often need skills that I currently don't have, so I will spend a lot of time reading and learning so I can get the job done.

Here are the most recent personal projects I have worked on.


## Searchle

![searchlee.png](https://ryancarmody-blog.s3.amazonaws.com/searchlee_9a585be21a.png)

**Check it out at:** [searchle.net](https://searchle.net). **Stack:** React.js

Searchle is not just a game, it's a learning experience. By guessing the word, you tap into the collective curiosity of the internet, offering a peek into global consciousness. Join the thousands of daily players and be part of the Searchle community, a space for curious minds looking for a unique, thought-provoking challenge.

## Smug Chicken

![smug-strapi.png](https://ryancarmody-blog.s3.amazonaws.com/smug_strapi_674e27c016.png)

**Check it out at:** [smugchicken.com](https://smugchicken.com). **Stack:** Angular 15, RxJS, Node.js, MongoDB, Heroku, Firebase and Twitter API.

What happens when you blend AI and Wordle? Smug Chicken! 🐔
 
Smug Chicken is an image-based word game where players must guess the two words entered into an AI art generator to create the resulting grid of four images. 

I got the pleasure of working on this game with my long time friend, [Haydn Kenny](https://www.linkedin.com/in/haydn-kenny-media/). This was a refreshing change as I usually work on web development projects by myself. It was great to be able to workshop ideas and create the best possible product.

So I guess the question is now, are you a smug chicken today?

## WhereTaken

![My project-1 (2).png](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_2_fb63c1599e.png)

**Check it out at:** [wheretaken.com](https://wheretaken.com). **Stack:** Angular 14, RxJS, Node.js, MongoDB, Heroku, Firebase and Twitter API.

I am a big fan of the daily games that became popular during COVID times, e.g. Wordle, Worldle, Flagle etc. I decided to build my own called WhereTaken. You have 6 chances to guess what country it is based on a single photograph. 

I used Angular 14 for the frontend with RxJS to create a completely reactive application. The game also keeps track of how many guesses people took to complete the game as well as their first guess. This information is passed to the Node.js backend and stored in a MongoDB database. That data is then used to show the global daily stats when users have completed the game.

I also have a Twitter Bot active for the [WhereTaken twitter account](https://twitter.com/wheretakengame), which is made using the Twitter API. It will automatically tweet yesterday's photo and answer, the stats from yesterday and will retweet a post related to WhereTaken.

The frontend Angular app is hosted on Firebase and the Node.js backend on Heroku. 

## Retro Snake

![Retro snake](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_03_06_pm_70bdc8e0c9.png)

**Check it out at:** [playretrosnake.com](https://playretrosnake.com). **Stack:** Angular 14, RxJS and Firebase.

I made this game while trying to improve my skills in creating reactive apps with Angular and RxJS. The game has a global state object which all components subscribe to. When a user presses the WASD keys, it will update the global state and change the direction on the next frame of the game. 

This game is hosted on Firebase.

## Odds Pony

![Play retro snake cover image](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_27_23_pm_2bda994a31.png)

**Check it out at:** [oddspony.com](https://playretrosnake.com). **Stack:** Angular 14, RxJS, NodeJS, MongoDB, reCAPTCHA, Firebase and Heroku.

I built this application when I wanted to work on a project that handled massive amounts of data. This application scans thousands of odds, which come from an API and gives users useful insights.

I have no interest in gambling/betting, but this was a great opportunity for me to work with an external API, process data and present it back in a meaningful way. Users can sign up for an API key from the data provider, and I make a percentage of those sales. It has created a nice monthly passive income for me. 

## Your budget summary

![Your budget summary cover image](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_34_16_pm_d8f192a321.png)

**Check it out at:** [yourbudgetsummary.com](https://yourbudgetsummary.com). **Stack:** Angular 13.

I made this project a couple of years ago. It is an application that will take in your income and expenses, and display your budget summary in a nice table at the bottom. 

When I built this, I had been working at RAA for a number of months and had started to gain some knowledge in Angular. I wanted to work on a project, end to end to reiterate some of the things I had learnt.




Most of the time, I am chipping away on some personal coding project. Check in here to see what I am currently working on!

![Heroku hosting platform logo](https://ryancarmody-blog.s3.amazonaws.com/heroku_d426f909c6.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=zoIR-d-QxaA" />

## Table of contents
- [Prerequisites](#prerequisites)
- [Step 1: Create a Strapi project](#step-1-create-a-strapi-project)
- [Step 2: Install the required PostgreSQL packages](#step-2-install-the-required-postgresql-packages)
- [Step 3: Add a database.js file](#step-3-add-a-databasejs-file)
- [Step 4: Push your project to GitHub](#step-4-push-your-project-to-github)
- [Step 5: Create a new Heroku app](#step-5-create-a-new-heroku-app)
- [Step 6: Connect your GitHub repo to Heroku](#step-6-connect-your-github-repo-to-heroku)
- [Step 7: Add Heroku Postgres add-on as the database](#step-7-add-heroku-postgres-add-on-as-the-database)
- [Step 8: Add required environment variables to Heroku](#step-8-add-required-environment-variables-to-heroku)



## Prerequisites

To get started, you'll need the following:
- [Strapi](https://strapi.io/) project
- [Node](https://nodejs.org/en/) installed (I have v16.14.2)
- [Git](https://git-scm.com/) installed
- [GitHub](https://github.com/) account
- [Heroku](https://heroku.com/) account


## Step 1: Create a Strapi project

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=44s" />

I am assuming that you have already created your Strapi project. If you have not, you can run the following in your terminal:

```
npx create-strapi-app@latest my-project
```

If you are brand new to Strapi and want to set up a project, you can check out my video where [I create a blog with Next.js, Strapi and GraphQL.](https://www.youtube.com/watch?v=jF4_yiO3HVc&ab_channel=CodewithRyan). The Strapi setup is in the first half of the video.

## Step 2: Install the required PostgreSQL packages

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=78s" />

We will be connecting our hosted Strapi project to a PostgreSQL database. We need to install some PostgreSQL packages to our Strapi project to make this possible. Open a terminal and navigate to your Strapi project, then run the following commands

```
npm install pg-connection-string --save
npm install pg --save
```

OR if you are using yarn

```
yarn add pg-connection-string
yarn add pg
```

## Step 3: Add a database.js file

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=121s" />

In your Strapi project, you have a `config` folder. Inside of this folder, create a new folder called `env`, and inside of that, create a new folder called `production`. Inside this folder, create a new file called `database.js` and add the following code

```js:config/env/production/database.js
const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);
module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});
```

This code will enable us to connect to the database we create in Step 6.

## Step 4: Push your project to GitHub

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=173s" />

You will need to push your Strapi project to GitHub using Git. If you are reading this tutorial, and are at the point in your career where you are creating content management systems, I am assuming that you already know how to do this. 
If not, [this article](https://www.digitalocean.com/community/tutorials/how-to-push-an-existing-project-to-github) explains it well. Once your project is on GitHub, move on to the next step. 

## Step 5: Create a new Heroku app

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=265s" />

Log in to your Heroku account. On the dashboard, click `new`, and then `create new app`.

![Screen Shot 2022-08-17 at 10.16.44 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_17_at_10_16_44_am_ecd1f9e1ce.png)

Then, give your project a name, select your region, and click `Create app`.

![Screen Shot 2022-08-17 at 10.18.46 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_17_at_10_18_46_am_3ff7924667.png)

## Step 6: Connect your GitHub repo to Heroku

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=294s" />

We are going to connect the repository we created to Heroku. We will set it up where your project will automatically deploy when we push new changes to our main branch.

Under the `Deploy` tab, click on `GitHub` and then `Search`. You should be presented with a list of your public repositories. If you have never connected GitHub to Heroku, first click `Connect to GitHub` and then you will be given the option to `Search`.

![Screen Shot 2022-08-18 at 11.31.05 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_11_31_05_am_57b8fabc2f.png)

Select your branch and click `Connect`. This will connect your GitHub repo. The last thing we need to do is enable automatic deploys. To do this, click `Enable Automatic Deploys` under the `Automatic deploys` section.

![Screen Shot 2022-08-18 at 11.35.42 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_11_35_42_am_e2303cc79f.png)

Don't click on `Deploy Branch` just yet. After step 7, we will return to this page and run a manual deploy.

## Step 7: Add Heroku Postgres add-on as the database

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=346s" />

As mentioned above, we are going to be connecting our Strapi project to a PostgreSQL database. Heroku has an add-on called `Heroku Postgres` we will use.

To add this add-on, click `Overview` and then `Configure Add-ons` or simply click on the `Resources` tab.

![Screen Shot 2022-08-18 at 4.18.53 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_18_53_pm_6a594ca11f.png)

Search for `Heroku Postgres` and click on it. You should see a pop-up. Here we can choose the plan we want and add it to our application. For this example, I will add the `Hobby Dev - Free` plan. Once you have chosen that click `Submit Order Form`.

Now go back to the `Deploy` tab, under `Manual Deploy`, click on `Deploy Branch`. This is the only manual deployment we will have to do as it will automatically deploy when we push/merge new changes to our main branch on GitHub.

## Step 8: Add required environment variables to Heroku

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=452s" />

There is just one more thing we need to do before we are done, and that is to add the required environment variables. If we navigate back to the code for the Strapi project, and go to the `.env` file, you'll notice that there are 4 additional environment variables other than `HOST` and `PORT`. They are `APP_KEYS`, `API_TOKEN_SALT`, `ADMIN_JWT_SECRET` and `JWT_SECRET`. These are used throughout our project.

![Screen Shot 2022-08-18 at 4.40.37 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_40_37_pm_76797a535b.png)

We need to set these environment variables in Heroku. Go back to Heroku and click on `Settings` and scroll down to `Config Vars`. 

![Screen Shot 2022-08-18 at 4.45.41 pm 1.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_45_41_pm_1_edc949c70e.png)

Click on `Reveal Config Vars`. As you'll notice we only have one config var set, which is our `DATABASE_URL`. We need to add `APP_KEYS`, `API_TOKEN_SALT`, `ADMIN_JWT_SECRET` and `JWT_SECRET` here. 

![Screen Shot 2022-08-18 at 4.47.07 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_47_07_pm_21784fde81.png)

We are going to add base64 strings of length 32 for these values. You can go to [generate.plus](https://generate.plus/en/base64) to help you generate these. While we are here, we will also set `NODE_ENV` to `production` and `MY_HEROKU_URL` to `<your app name>.herokuapp.com/`. If you have forgotten your Heroku app name, scroll to the top of the page and click `Open app`, which will take you to your Heroku URL, which contains your app name. If you do this, it will likely show an application error, you can ignore this for now.

After you have added in all of the environment variables, it should look something like this

![Screen Shot 2022-08-18 at 4.52.33 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_52_33_pm_d39552b463.png)

And that is it! Your Strapi project is now deployed to Heroku. You can scroll to the top of the page and click on `Open app` to open your application. You can then navigate to `<your app name>.herokuapp.com/admin` and create a new super user and get started using your deployed Strapi project.

If you liked this tutorial, you may like the YouTube video I made where [I created a blog with Next.js, Strapi and GraphQL.](https://www.youtube.com/watch?v=jF4_yiO3HVc&ab_channel=CodewithRyan). Check it out!

In this post, I will show you how to host your Strapi project on Heroku. There is also a YouTube tutorial available. 

Prefer to watch a video? This tutorial is now available on [YouTube](https://www.youtube.com/watch?v=5EeEkEA75Ts&ab_channel=CodewithRyan).

To add [google analytics](https://analytics.google.com) to your Next.js application, first add a new environment variable. You may also need to add this variable where you are hosting your site.

```:.env
GOOGLE_ANALYTICS="<your ga tag goes here>"
```

Then, either in your `_app.js`, or if you have one, `_document.js` file, add the following in the Next.js `Head` tag:



```tsx:_app.js
<Script
  strategy="lazyOnload"
  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS}`}
/>

<Script id="ga-script" strategy="lazyOnload">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '${process.env.GOOGLE_ANALYTICS}', {
      page_path: window.location.pathname,
    });
        `}
</Script>
```

And there you have it, you have added google analytics to your Next.js application!

In this short article, I will show you how to add google analytics to your Next.js application.

When using the Next.js `Image` tag, you must add the `width` and `height` attributes, or `layout="fill"` or your application will not compile. You have to add something like:

```jsx
<Image
  src={"/images/me.png"}
  alt="an image of the author"
  width={50}
  height={50} 
/>
```

This is all well and good but what if your image is coming from some external source and you want to fill the entire width and keep the image's aspect ratio? Essentially, you want to set `width: 100%` and `height: auto`. With a regular image tag, this is easily done, but with the Next.js `Image` tag, [many developers](https://github.com/vercel/next.js/discussions/18739) have struggled with it. 

After crawling through many forums, [arnovanstaden](https://github.com/arnovanstaden) posted a solution on the Next.js [github page](https://github.com/vercel/next.js/discussions/18739).

You must add a container div around your `Image` tag, and add the following styles.

```html
<div className="imageContainer">
        <Image src={somePath} 
           layout="fill" 
           className="image" 
        />
</div>
```

```css
.imageContainer {
        width: 100%;

        >span {
            position: unset !important;
        }

        .image {
            object-fit: contain;
            width: 100% !important;
            position: relative !important;
            height: unset !important;
        }
    }
```

**Note:** You may need to change `span` to `div`. Use the dev tools in your browser to see how it is rendering.

And there you have it! 

Are you having trouble filling the entire width of the parent container while maintaining the images aspect ratio? Here is a solution

/blog/code

Latest articles

How to replicate Tom Scott's 'This video has X views' video with Node.js and YouTube Data API

Create OAuth tokens in Google Cloud to interact with the Youtube Data API

How to automate Instagram posts with Node.js and instagram-private-api (Instagram bot)

How to like and retweet using the Twitter v2 API

How to tweet images using the v2 Twitter API

Creating a Twitter bot with Node.js and Twitter API

Generate your keys and tokens for the Twitter API

How to add code blocks with syntax highlighting to a Next.js blog using MDX with Prism.js

My personal projects

How to host your Strapi project on Heroku

How to add google analytics to your Next.js application

Next.js Image Tag - How to fill the entire width of the parent container & maintain the image's aspect ratio