Developers

Integrate easyCDN in Minutes

Adding powerful content delivery capabilities to your application has never been easier. Follow our simple integration steps to get started with easyCDN today.

Read the Docs

Try out our Dropzone

1

Install the packages

Add easyCDN to your project with a single command

bash
npm install @easycdn/react @easycdn/server
2

Add the Dropzone component

Drop files directly in your React components

tsx
'use client'
import { Dropzone } from '@easycdn/react'

export default function MyPage() {
  return (
    <Dropzone
      publicKey={process.env.NEXT_PUBLIC_EASYCDN_PUBLIC_KEY}
      onUploadComplete={async ({ tempId, previewUrl }) => {
        const { asset } = await persistUpload(tempId)
      }}
    />
  )
}
3

Create server action

Persist uploaded files with server-side validation

ts
'use server'
import { createClient } from '@easycdn/server'

export async function persistUpload(tempId: string) {
  const easyCDNServer = createClient({
    secretKey: process.env.EASYCDN_SECRET_KEY!
  })

  const { asset, preview } = await easyCDNServer.persist({
    tempAssetId: tempId
  })

  return { asset, preview }
}
4

Alternative: Direct upload

Upload files directly from your server

ts
'use server'
import { createClient } from '@easycdn/server'

export async function uploadFile(filePath: string) {
  const easyCDNServer = createClient({
    secretKey: process.env.EASYCDN_SECRET_KEY!
  })

  const { asset, preview } = await easyCDNServer.upload(filePath)

  return { asset, preview }
}

API Keys

Your Public and Secret Keys are accessible in the Developers section of your dashboard. Keep your Secret Key secure and never expose it in client-side code.

Ready to start building?

Sign up for a free account and get your API keys to start integrating easyCDN today.

No credit card required • Get started in under 2 minutes