Learn Supabase JS #0 : Introduction
Supabase is an open source backend-as-a-service (BaaS) with many features such as database, authentication, edge functions, etc. Supabase is built with purpose to be the alternative of another popular backend-as-a-service, Firebase which is created by Google. Supabase provides free plan for their service which is more than enough for small and hobby projects.
What is backend-as-a-service (BaaS) ?
Backend-as-a-service is a web service created by some company to provides user (which usually a developer) a backend service to used. Usually, Baas contains many backend core features such as database dan authentication. User (developer) can access it through REST API created automatically by it or through language-specific library provided by the company. This service makes it really easy for developer to make a backend server without actual knowledge of backend coding. The setup is also pretty fast so it compatible for prototyping a test project server. For React JS developer, BaaS is very useful because you can have a backend server to save and modify data without actually make it.
Supabase JS
Supabase also provides a library for Javascript developer called Supabase JS. This library consists of many function for Supabase feature such as Database, Authentication, Storage and etc. We can use SupabaseJS client library to access those feature. This library can be installed through package manager (such as npm or yarn) or through CDN. In this guide series, i will be use SupabaseJS alongside with React JS.
With React JS, we can install SupabaseJS through package manager and make our app access the backend server and it’s feature through it.
Project Setup
To create a Supabase backend server, you need to go to it’s official website and create an account there (https://supabase.com).
Then in your dashboard page, you can create a new project by clicking at New Project button and choose your organization (in this case, personal)
After that, you must fill a form with a project information such as project name, database password, region, etc. When you done filling that, you can click the Create new project button.
Finally, your project server will be created and it will show you the project API keys and project URL. You need this information to use it later with SupabaseJS client library. Don’t worry, you can view this information again at your project setting later.
Installation
In this guide, we will install SupabaseJS in React JS app through package manager with this command :
npm install @supabase/supabase-js
After that, we can start using SupabaseJS client library in our project. But before that, we need to initialize it first using createClient() method provided by SupabaseJS. We must pass our supabase project URL and supabase project API key to that method.
For best practice, we can create a new javascript file to initialize the SupabaseJS client into a variable for easier use later. This also make the code more cleaner and reusable. Project URL and API key is confidential so it need to be a secret. We can use environment variable to hide it from public.
Lastly, we can export the supabase variable to use it in another components later.
In this case, i will be use Typescript for these example but you can still use Javascript :
That’s it for the introduction, you can view more information at SupabaseJS official docs (https://supabase.com/docs). I will be posted another SupabaseJS guide soon.
Thank you for reading this guide, if you like and want more of these contents you can follow me on Medium.
