[Deprecated] Using Cloudinary with Strapi CMS [Building Personal Blog Website Part 2]

As Heroku is phasing out the free tier I'm going to rewrite the first two parts of this guide. Here you can find the updated version: COMING SOON.

This is the second part of the "Building Personal Blog Website" series. In the series we'll setup a free CMS to hold our blog content on Heroku, create a React app with Next.js' static site generation and TailwindCSS to present the articles and host it on Netlify.

All articles:
Part 1: Hosting free Strapi CMS on Heroku
Part 2: Using Cloudinary with Strapi CMS
Part 3: Setting up a basic Next.js app locally

As you are building a personal blog it is really possible that you'd want to use some images in the blog posts. The CMS is hosted on a free-tier Heroku, so the storage is rather limited. That's why you need to think about other solutions. And here's where the cloud comes in.

For this I have chosen Cloudinary. It's a rather popular platform for managing assets and optimizing images. But the main reason to use it for our personal project is that it has a free tier with easy-to-use API. Config is worry-free - you'll go through it today.

But before you start - head out to Cloudinary, create a free account (the process is rather standard) and when you're done - log in and get your SDK config (Getting Started -> Configure your SDK -> Start configuring).

Save those variables somewhere and then let's go back to your Strapi app in your code editor of choice.

First you need to install a Cloudinary provider:

yarn add @strapi/provider-upload-cloudinary

Then update Strapi config in config/plugins.js file (create it if it doesn't exist):

module.exports = ({ env }) => ({
 upload: {
   config: {
     provider: "cloudinary",
     providerOptions: {
       cloud_name: env("CLOUDINARY_NAME"),
       api_key: env("CLOUDINARY_KEY"),
       api_secret: env("CLOUDINARY_SECRET"),
     },
     actionOptions: {
       upload: {},
       delete: {},
     },
   },
 },
});

Next step would be to create the environment variables through Heroku CLI so they would have proper values:

heroku config:set CLOUDINARY_NAME=[cloud_name from Cloudinary config]
heroku config:set CLOUDINARY_KEY=[api_key from Cloudinary config]
heroku config:set CLOUDINARY_SECRET=[api_secret from Cloudinary config]

You're almost done! Now you need to update the middleware for Strapi - strapi::security to be exact. Instead of just string you should put an object there (config/middleware.js):

module.exports = [
 "strapi::errors",
 {
   name: "strapi::security",
   config: {
     contentSecurityPolicy: {
       useDefaults: true,
       directives: {
         "connect-src": ["'self'", "https:"],
         "img-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
         "media-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
         upgradeInsecureRequests: null,
       },
     },
   },
 },
 "strapi::cors",
 "strapi::poweredBy",
 "strapi::logger",
 "strapi::query",
 "strapi::body",
 "strapi::session",
 "strapi::favicon",
 "strapi::public",
];

Now commit all of you changes and push:

git push heroku HEAD:main

And that's it! After the app is redeployed the CMS will use Cloudinary for storing images. Let's just quickly test this. Head out to your Strapi Admin Panel on https://[your-app].herokuapp.com/admin/.

Go into Content Manager and edit the blog post you created in the first part of this article series.

Then click on the area below cover (or whatever you named this field) and just follow the instructions on the screen to add a new image.

After saving you should see in the blog post editor that the image is in fact there.

But now to be entirely sure the image was added correctly - go to the Cloudinary website, log in and go into Media Library. There you should see your newly created image in 3-4 sizes.

Easy, right? So now that you are ready to create some blog posts with images you can start working on a React app to display them. And that will be the third part of this guide, so stay tuned!