JavaScript quick start

This quick start is intended to let you quickly try using several common Cloudinary features. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.

You can perform this quick start in a code sandbox or in a clean project in the dev environment of your choice.

You can also view the completed code of this quick start in a GitHub repo and code explorer.

In this quick start you'll learn how to start delivering your media from Cloudinary using the @cloudinary/url-gen package.

This quick start assumes you are using pure JavaScript with a bundler, however you can also use the @cloudinary/url-gen package together with one of the frontend-frameworks packages. For details, see:

• Angular SDK quick start
• React SDK quick start
• Vue SDK quick start

Prerequisites

To perform this quick start, you'll need:

• A Cloudinary account. If you don't have one yet, you can quickly register for free.
• Your product environment credentials. You can find your credentials in the Dashboard page of your Cloudinary Console.
• A working JavaScript development environment with a supported version of JavaScript.

1. Set up and configure the SDK

Install the package

Install the @cloudinary/url-gen package using the NPM package manager:

Configure Cloudinary

Create a basic JavaScript app, and in index.js copy and paste the following:

2. Upload an image

If you changed the cloud name in the previous step to your own, you need to use an image that's stored in your Cloudinary product environment for the next steps. All new accounts come with sample images, so you can use one of those, or, if you want to use the same image as us, save this image locally, then upload it to Cloudinary.

For the purposes of this quick start, the quickest way to upload a single image is as follows:

1. Log into your Cloudinary Console.
2. Select Media Explorer from the left panel.
3. Click Upload to open the Upload Widget, then click Advanced and type "docs/models" into the Public ID field.
4. Click Browse to find the image to upload. Once uploaded, you can see the image in the listed assets (set Creation date to Today in the Search to find it quickly).
   

In the next step, you'll need the public ID of whichever image you use (in our case, we set the public ID on upload to docs/models). If using one of the sample images, you can copy the public ID from the Public ID column in the Media Explorer, when in list view:

3. Transform and deliver the image

Copy and paste this import statement below the existing one:

Copy and paste the following code, under the configuration code:

4. Run your code

Run the code to see the transformed image.

View the completed code

Here's the full example:

This code is also available in GitHub.