DEV Community 👩‍💻👨‍💻

Cover image for [Deprecated] Using Cloudinary with Strapi CMS [Building Personal Blog Website Part 2]
Michał Hawełka
Michał Hawełka

Posted on • Updated on

[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).

Cloudinary config

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

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: {},
     },
   },
 },
});
Enter fullscreen mode Exit fullscreen mode

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

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",
];
Enter fullscreen mode Exit fullscreen mode

Now commit all of you changes and push:

git push heroku HEAD:main
Enter fullscreen mode Exit fullscreen mode

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.

Edit post

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.

Adding image

Adding image - step 2

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

Edited blog post

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.

Cloudinary

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!

Top comments (1)

Collapse
 
maxfindel profile image
Max F. Findel

Thanks for these guides Michał. I'm looking forward for part 3! I'm curious how you'll approach the frontend using React. I'm specially curious about how you're going to load the images from Cloudinary using the right sizes for every device 🤓

Join us at DEV Want to join the conversation?
 

It's easy! Become a DEV member to follow this post, comment, and more.