Install and Add the Cloudinary Provider to a Strapi Application
We'll learn how to integrate Cloudinary into our Strapi application so that we can upload image assets in our Strapi dashboard and the resulting image will be stored in Cloudinary and ready for use in our application.
We'll create a config/plugins.js file and paste in some config code that sets Cloudinary as the provider with cloud_name, api_key, and api_secret.
Then we'll install the Cloudinary provider plugin with npm install @strapi/provider-upload-cloudinary, add the middleware security that lets us use Cloudinary, and finally add Cloudinary credentials to our .env file.
Instructor: [0:00] We want to be able to use a digital asset management tool with our Strapi application so when we deploy it, it's easier to manage our assets. To do that, we'll switch back to our Strapi terminal. We stop our server and open up VS Code.
[0:18] In VS Code, we'll open our config file and create a new file called plugins.js. Inside plugins.js, we'll paste in the following code. Back in our terminal, we install Cloudinary with npm. After the install, we'll open VS Code and we'll go into our middleware file.
[0:38] We replace our security with this snippet that lets us use Cloudinary, and save. Then we'll go into our environment variables and paste in our Cloudinary credentials. Then we'll go back to our terminal and then rebuild our admin with yarn build. Once our admin is built, we start our server with yarn develop.
[1:03] In our browser, we'll go to our media library and add an asset. We'll upload our asset. In our posts, we'll go to untitled excerpt, and at the bottom of untitled excerpt, we'll upload an image which is our yellow box, and save.
[1:23] Now, you can see the URL of our image is a Cloudinary URL. We'll press save, and if we go and query our posts and refresh that, when we check our response object and look at untitled excerpt and look at the body, we should see at the end of it a Cloudinary URL.
[1:49] And so now we know Cloudinary is installed. That is how you set up Cloudinary in your Strapi application.