Vinish Bhaskar

May 14 2024

How to integrate Cloudflare R2 Bucket with Boilerplate and Template

Learn how to seamlessly integrate Cloudflare R2 Bucket with your SaaS Boilerplate for secure and scalable file storage.

How to integrate Cloudflare R2 Bucket with Boilerplate and Template

Managing file uploads efficiently is critical to building a scalable and user-friendly SaaS application. Fortunately, Cloudflare R2 provides a robust, cost-effective storage solution. Integrating an R2 Bucket with your Next.js SaaS boilerplate or template is a straightforward and efficient way to handle file uploads, such as user profile images.

Ready to add file storage to your SaaS application?

In this article, we will guide you through integrating Cloudflare R2 with your Next.js SaaS boilerplate ( using the SaaSBold, or you can use your own) and template. This will enable you to handle file uploads, such as user profile images quickly.

Furthermore, by leveraging Cloudflare R2, you can ensure fast, secure, and reliable storage for your application's assets. Follow the steps below for a smooth integration process.

Why Use Cloudflare R2?

  • Cost-Effective: R2 offers generous free usage limits and competitive pricing for larger needs.
  • S3 Compatibility: It's fully compatible with the AWS S3 API, so you can easily switch or use existing tools.
  • Performance: R2 is backed by Cloudflare's global network, ensuring fast access to your files.
  • Security: It includes robust security features like encryption and access controls.

With all these benefits, integrating Cloudflare R2 into your Next.js SaaS boilerplate is a smart move for your storage needs. Let's get started!

Integrating Cloudflare R2

Let's start setting up your Cloudflare R2 bucket – the secure storage foundation for your files. This process is straightforward and involves just a few simple steps.

Create a Cloudflare R2 Bucket

First, we need to set up a Cloudflare R2 bucket. Follow these steps:

1. Log in to your Cloudflare account.

2. Go to R2 -> Create Bucket.

blog image

3. Enter a name for your bucket and click on the "Create bucket" button.

blog image

Also, update this .env file variable with your Bucket name.

R2_BUCKET_NAME=YOUR_BUCKET_NAME

4. Account ID: Copy the Account ID and save it to the .env file before proceeding.

After that, click on the "Manage R2 API Tokens" button.

blog image

It'll redirect you to another page to generate API token.

Generate API token

1. Create API Token: Click the "Create API Token" button on the new page.

blog image

2. Now, Assign the token name, then select Object Read & Write permissions, and choose the bucket you created.

blog image

3. Scroll down and click "Create API Token".


4. Once you click that button, you'll see the Access Key ID and the Secret Access Key. Copy the Access Key ID and the Secret Access Key, then update your .env file:

blog image
R2_ACCESS_KEY_ID=YOUR_ACCESS_KEY_ID
R2_SECRET_ACCESS_KEY=YOUR_SECRET_ACCESS_KEY

Configuring CORS Policy

To enable file uploads from your application, you need to configure the CORS (Cross-Origin Resource Sharing) policy for your bucket:

1. Go to your R2 bucket's -> Settings.

blog image

2. Public R2 Bucket URL: Copy the public R2 URL and update it on the .env file for the variable.

NEXT_PUBLIC_IMAGE_URL=Your_Public_URL

3. CORS Policy: Scroll down and click "Add CORS Policy" or "Edit CORS Policy".

blog image

4. Update the CORS policy with the following code and save it.

blog image
[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "PUT",
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

Conclusion

That's it! You've successfully integrated Cloudflare R2 into your Next.js SaaS boilerplate. Now, you can start uploading and retrieving files using the S3 API from your application. This integration is especially useful for efficiently managing file uploads, such as user profile images.

Related Blog Posts

Maecenas et nunc tellus wed eu elit odio quisque sed libero finibus, posuere metus vel

blog-image
Vinish Bhaskar

May 12 2024

How to Integrate Sanity with Next.js Template or Boilerplate

Learn how to seamlessly integrate Sanity CMS with your Next.js SaaS Boilerplate. Create a streamlined content workflow.

blog-image
Vinish Bhaskar

Jun 01 2024

How to integrate Algolia with SaaS Boilerplate and Template

Learn how to seamlessly integrate Algolia search into your SaaS boilerplate for improved search relevancy and performance.

blog-image
Vinish Bhaskar

May 13 2024

How to get PostgreSQL Database URL & Integrate with Boilerplate

Learn how to quickly get PostgreSQL database URL from Supabase and integrate it seamlessly with your Next.js SaaS Boilerplate in minutes.

blog-image
Vinish Bhaskar

May 17 2024

How to Integrate Email API into Next.js Boilerplate or Template

Learn how to seamlessly integrate email functionality into your SaaS boilerplate/template using Resend SMTP's powerful API. Effortlessly send transactional Emails.

blog-image
Vinish Bhaskar

Jun 12 2024

How to Quickly Deploy SaaS Boilerplate and Template on Vercel

Speed up your SaaS launch! Learn how to deploy your SaaS Boilerplate on Vercel quickly and effortlessly with this step-by-step guide.

blog-image
Vinish Bhaskar

May 13 2024

How to integrate Mailchimp with Boilerplate or Templates

Learn how to seamlessly integrate Mailchimp into Next.js Boilerplate/Template, enabling you to create, send, and track effective email marketing campaigns.

blog-image
Vinish Bhaskar

May 15 2024

How to Integrate NextAuth.js with Next.js Boilerplate and Template

Simplify authentication in your templates and SaaS Boilerplate! Learn how to effortlessly integrate NextAuth with Google and GitHub login, including passwordless magic links.