GithubHelp home page GithubHelp logo

tesha-r / cld-jumpstart Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cloudinary-training/cld-jumpstart

0.0 0.0 0.0 15.3 MB

Cloudinary Jumpstart - basics of how to get started as a Cloudinary developer

License: MIT License

JavaScript 100.00%

cld-jumpstart's Introduction

Cloudinary Jumpstart

Cloudinary Jumpstart - Introduction to Cloudinary Using Node.

You'll learn the basics of how to get configured and started as a Cloudinary developer.

Topics:

  • Environment Setup and Account Identifiers
  • Uploading Basics
  • Cloudinary URL Builder
  • Transformation and Delivery (Resize, Crop, Optimize)
  • Further Support

Environment Setup

Install Node.js and NPM

You will need to install Node.js on your machine. Download Node

Important - Installing Node.js will also install npm, the package manager for Node.js.

Mac Users

Using Homebrew:

brew install node

Windows

Using Chocolatey

choco install nvs

Verify Node/NPM install

# verify versions
$ node --version
v19.2.0

$ npm --version
8.19.3

Choose an IDE or Use Text Editor

Download Repository

Cloudinary Jumpstart

Checkout a local copy of the repository using the following command in a command line terminal on your computer:

git clone https://github.com/cloudinary-training/cld-jumpstart.git

  • Assets are located in /assets directory
  • Run scripts from the cld-jumpstart directory you have checked out. All references to local assets are relative to the root of the repository.

Credentials

  1. Create a free account on Cloudinary at [https://www.cloudinary.com/signup]

  2. Navigate to the Dashboard. Copy the CLOUDINARY_URL into your clipboard.

Dashboard

  • Key: CLOUDINARY_URL
  • Value: cloudinary://API_KEY:API_SECRET@CLOUD_NAME
  1. Create a .env file in the root of the project. Paste the CLOUDINARY_URL environment variable into your .env file.

Libraries

You will be using the cloudinary and the dotenv libraries.

Install Cloudinary

npm install cloudinary

Install dotenv

npm install dotenv 

In config.js and all other node scripts, you'll see

require('dotenv').config();
const cloudinary = require('cloudinary').v2;

Run Code: Test Credentials (config.js)

Make sure to npm install the Node.js libraries. You will be using the cloudinary and the dotenv libraries.

npm i

Run Code: config.js

node config.js

You should see your Cloud Name and API Key output in this format:

****Set up and configure the SDK:****
 cloud_name
 api_key 

PS- Always keep your API_Secret private!

Run Code

Basic Upload Method:

  • Local
node local-upload.js
  • Remote
node remote-upload.js
  • Public ID Naming Options
node public-id.js
  • Specify Resource Type
node resource-type.js

URL Builder:

  • Retrieve Cloud Name from CLOUDINARY_URL
node cloudinary-url.js
  • Supply Cloud Name in Code
node cloudinary-url-without-env.js

Basic transformations:

  • resize
node resize.js
  • fill crop with gravity
node crop.js

Basic optimizations:

  • automatic format
node format-auto.js
  • automatic quality
node quality-auto.js
  • both (f_auto, q_auto)
node optimize.js

Introduction to Cloudinary for API Users and Node.js Developers

If you'd like to learn more than the basics of getting started with Cloudinary, please do check out our course: Introduction to Cloudinary for API Users and Node.js Developers, and its associated repository

To learn even more, head to the Cloudinary Academy

Credits

assets/images

hiker.jpg - Photo by Edou Hoekstra from Pexels

glacier.mp4 - Photo by Jan Zakelj from Pexels

surfer.jpg - Wikimedia

y2kbug.ttf - Public TrueType Font File, Y2K Bug, from All-free-download.com

cld-jumpstart's People

Contributors

jenbrissman avatar rebeccapeltz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.