Forem: Aroge Ridwan

Using Supabase to Store Images in a .NET Application

Aroge Ridwan — Mon, 03 Jun 2024 15:12:27 +0000

Introduction
Set Up Supabase Storage
Create a .NET Project Using Visual Studio
Configure Supabase Client
Conclusion

Introduction

Supabase storage offers a powerful solution for efficiently managing file storage in web applications. In this guide, we'll explore how to leverage Supabase storage within a .NET application to handle image uploads seamlessly.

By using Supabase storage, we can avoid the pitfalls of storing large files directly within the database, which can adversely affect database performance and scalability. Instead, Supabase converts uploaded files into accessible URLs, which are then stored in the database. This approach not only helps maintain a lean and efficient database but also simplifies the process of accessing and integrating files into your application.

In this tutorial, we'll walk through the steps to set up a .NET API that allows users to upload images. These images will be stored securely in Supabase storage, and their URLs will be gotten which can later be stored in the database for easy retrieval and integration into your application. Let's dive in and discover how Supabase storage can streamline image management in your .NET projects.

Set Up Supabase Storage

Step 1: Sign up at supabase.com and create a new project.

Project Details

Name: Enter a name for your project.
Database Password: Create a strong password for your database. This password will be used to connect to your database, so ensure it is secure.
Region: Choose a region for your database server. If you are in Nigeria, the closest region is typically Europe (London). Selecting a closer region can help minimize latency for users in Nigeria.

Click on the Create new project button to finalize the creation of your new Supabase project.

Step 2: Create a Bucket in the new project

Click on the Storage tab on the left-hand menu.
Click the New Bucket button.
Enter a name for your new bucket, e.g., photos.
Toggle the switch to make the bucket public. This setting allows anyone to access the files in this bucket without needing authentication.
Click the Save button to save your new bucket.

Create a .NET Project Using Visual Studio

Launch Visual Studio.
Click on Create a new project .
Search for ASP.NET Core Web API and select it.
Enter a name for your project (e.g., SupabaseImageUpload).
Choose a location to save your project.
select the target framework (e.g., .NET 6.0 or .NET 7.0 or .NET 8.0).
Click Create .

Configure Supabase Client

Step 1: Install the necessary NuGet packages:

Open your project in Visual Studio.
Right-click on your project in the Solution Explorer.
Select Manage NuGet Packages...
Search for Supabase and select the Supabase package from the list.
Click the Install button and ensure that the Supabase package is listed among the installed packages.

Step 2: Configure Supabase in appsettings.json

 "Supabase": {
    "Url": "https://your-supabase-url.supabase.co",
    "ApiKey": "your-supabase-api-key"
  }

Click on the Settings tab on the left-hand menu and then click on API
Copy the URL provided under the API settings and paste in the Url in the appsettings.json
Click on the service_role secret to reveal it, Copy the API key (secret) provided and paste in the Apikey in the appsettings.json

Step 3: Program.cs Configuration

builder.Services.AddScoped<Supabase.Client>(_ =>
new Supabase.Client(
    builder.Configuration["Supabase:Url"],
    builder.Configuration["Supabase:ApiKey"],
    new SupabaseOptions
    {
        AutoRefreshToken = true,
        AutoConnectRealtime = true,
    }));

Step 4:
Create a model for the request. Add CreateImageRequest.cs

 public class CreateImageRequest
 {
     public string Name { get; set; }
     public IFormFile Image { get; set; }
 }

Step 5: Create a controller ImageController.cs:

 [Route("api/[controller]")]
 [ApiController]
 public class ImageController : Controller
 {
     [HttpPost]
     public async Task<IActionResult> UploadImage([FromForm] CreateImageRequest request,
          [FromServices] Supabase.Client client)
     {
         using var memoryStream = new MemoryStream();
         await request.Image.CopyToAsync(memoryStream);
         var imageBytes = memoryStream.ToArray();

         var bucket = client.Storage.From("photos");
         var fileName = $"{Guid.NewGuid()}_{request.Image.FileName}";
         await bucket.Upload(imageBytes, fileName);

         var publicUrl = bucket.GetPublicUrl(fileName);

         return Ok(new { Url = publicUrl });
     }
 }

Step 6: Test and Run your .NET application

Use a tool like Postman or Swagger to test the image upload endpoint:
URL: https://your-localhost/api/Image
Method: POST
Form Data: Name: Any string value. Image: Choose an image file to upload.

Conclusion

In this article, you've successfully set up a .NET API that can upload images to Supabase storage and retrieve their public URLs. This can be extended and integrated into various applications where you need to store and manage images or other files. Supabase provides a robust backend solution with easy integration for your .NET applications.
Here is the GitHub repository for this article in case you need to check it out. Lastly, if you have found value in this article, please consider sharing it with your peers who may also benefit from it.

What are your thoughts on the topic "Using Supabase to Store Images in a .NET Application"? Feel free to share your thoughts in the comments section below.

Happy coding!

Setting Up An Angular Project

Aroge Ridwan — Wed, 29 May 2024 11:58:05 +0000

Introduction
Prerequisites
Install Angular CLI
Create a New Angular Project
Go to Your Project Directory
Project Structure Overview
Building the Project for Production
Conclusion

Introduction

Angular is a popular front-end framework for building dynamic web applications. It uses typescript by default for creating logics and methods for a class but the browser doesn’t know typescript.

Setting up an Angular project from scratch can be a task, especially for beginners. here, the Angular Command Line Interface (CLI) comes into picture, serving as a powerful tool to streamline the project setup process and enhance developer productivity. Webpack is used to compile these typescript files to JavaScript. In addition, there are so many configuration files you will need to run an angular project on your computer.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js:
Angular requires Node.js for the development environment. You can download and install it from nodejs website.
npm (Node Package Manager): It comes with Node.js, so if you have Node.js installed, you should have npm as well.
You can verify the installation by running the following commands in your terminal:

node --version
npm --version

Install Angular CLI

Angular CLI (Command Line Interface) is a powerful tool that helps you create and manage Angular projects. Install it globally using npm:

npm install -g @angular/cli

Create a New Angular Project

Use Angular CLI to create a new project. Open your terminal and run:

ng new my-angular-app

Replace my-angular-app with your desired project name.
You'll be prompted to answer a few questions about your project setup, such as whether to include Angular routing and which stylesheets format to use (CSS, SCSS, etc.).

4. Go to Your Project Directory
After the project is created, navigate into the project directory:

cd my-angular-app

Run server and see your application in action

ng serve

By default, the application will be served at http://localhost:4200/.
Open your web browser and navigate to http://localhost:4200/ to see your new Angular application running.

Note: If you need to change the port, for example, because another application is using the default port, you can run:

ng serve --port desiredPort

For instance:

ng serve --port 3200

This will serve the application on http://localhost:3200/.

Project Structure Overview

Here's a brief overview of the main folders and files in your Angular project:

- node_modules/: Contains all the npm packages installed for your project.

- src/: Contains the source code of your application.
app/: Main app directory where your components, services, and other parts of your application reside.

- app.component.*: Main component files (HTML, CSS, TypeScript, and spec file for testing).

- assets/: For static assets like images.

- environments/: For environment-specific configurations.
When you create a new Angular project, the src/environments/ directory contains two files by default:

environment.ts: Used for development settings.

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};

environment.prod.ts: Used for production settings.

export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com',
};

In these examples:

production: A boolean indicating if the environment is production.
apiUrl: The base URL for API requests.

- angular.json: Configuration file for Angular CLI.

- package.json: This file stores the information about the libraries added and used in the project with their specified version installed. Whenever a new library is added to the project it’s name and version is added to the dependencies in package.json.
Modifying the App Component
You can start modifying the default component to get a feel of how Angular works. Open src/app/app.component.html and change the content to:

<h1>Welcome to My Angular App!</h1>
<div>
    <p>
        This is my First Angular app.
    </p>
</div>

Save the file, and your changes should automatically be reflected in the browser.

Adding a New Component
Create a new component using Angular CLI. For example, to create a hello-world component :

ng generate component hello-world

This command will create a new folder hello-world in the src/app directory with the component files.
Inside the hello-world folder, Angular CLI generates four files:

hello-world.component.css: The CSS file containing the component's styles.
hello-world.component.html: The HTML file containing the component's template.
hello-world.component.spec.ts: The TypeScript file for unit testing the component.
hello-world.component.ts: The TypeScript file containing the component class.

Using the New Component
To use the new hello-world component, add its selector tag to app.component.html:

<h1>Welcome to My Angular App!</h1>
<div>
    <p>
        This is my First Angular app.
    </p>
</div>
<app-hello-world></app-hello-world>

Open src/app/hello-world/hello-world.component.html and add some content to it, like:

    <p>
        Hello, World!.
    </p>

Save the files and see the changes in your browser.

Building the Project for Production

To build the project for production, run:

ng build --prod

This will create a dist/ directory with the production-ready files.

Building your Angular project for production with ng build --prod prepares your application for deployment

Conclusion

In this article, you've successfully set up an Angular project and created a new component. From here, you can start building more complex features and exploring Angular's capabilities. Whether you're adding new components, integrating services, or enhancing your application's performance, Angular provides a robust framework to help you achieve your goals.

Here is the GitHub repository for this article in case you need to check it out. Lastly, if you have found value in this article, please consider sharing it with your peers who may also benefit from it.

What are your thoughts on the topic "Setting Up An Angular Project"? Feel free to share your thoughts in the comments section below.

Happy coding!

Forem: Aroge Ridwan

Using Supabase to Store Images in a .NET Application

Table of Contents

Introduction

Set Up Supabase Storage

Create a .NET Project Using Visual Studio

Configure Supabase Client

Conclusion

Setting Up An Angular Project

Table of Contents

Introduction

Prerequisites

Install Angular CLI

Create a New Angular Project

Project Structure Overview

Building the Project for Production

Conclusion