How to Deploy a Full-Stack Web App with Netlify and Supabase

Introduction

When building modern web applications, deployment and hosting can be as crucial as the development itself. This guide walks through deploying a full-stack application using Netlify for frontend hosting and Supabase for backend services, creating a robust and scalable infrastructure.

Hosting Your Portfolio & App on Netlify

Adding a Custom Subdomain

To add your app under a subdomain like app.yourdomain.com:

• Go to your DNS provider: Log in to your domain registrar (e.g., One.com).
• Create a CNAME record: Set Host name as app and Alias of as yourapp.netlify.app.
• Add the subdomain to Netlify: In Netlify, go to Domain settings and add app.yourdomain.com as a custom domain.

3. Database Setup with Supabase

For your web app, you'll need a cloud-based database. Supabase offers a fully managed PostgreSQL database with additional features like authentication and storage. It's a perfect choice for building scalable apps.

Steps to set up Supabase with your app:

1. Create a Supabase account: Sign up on Supabase.
2. Create a new project: Provide a database name and choose a region. You'll get a connection string and keys.
3. Export your local PostgreSQL database: Run pg_dump to create a backup file.
4. Import your database: Upload your backup.sql to Supabase via the SQL Editor.
5. Update your app's database connection: Replace the local PostgreSQL URL with the Supabase connection string in your app's environment variables.

4. Authentication with Supabase vs. Netlify

When it comes to managing user authentication, **Supabase Auth** is the better choice if your app involves database interactions. It handles user sign-ups, log-ins, social logins (Google, GitHub), and integrates directly with your PostgreSQL database.

If your web app requires database-driven user management, use Supabase's authentication system to manage your users. Here's an example of how to integrate it:

const { createClient } = require('@supabase/supabase-js');
const supabase = createClient('your-supabase-url', 'your-anon-key');

// User sign-up
const signUp = async (email, password) => {
  const { user, error } = await supabase.auth.signUp({ email, password });
  if (error) {
    console.log("Error signing up:", error.message);
  } else {
    console.log("Signed up user:", user);
  }
};

// User log-in
const logIn = async (email, password) => {
  const { user, error } = await supabase.auth.signIn({ email, password });
  if (error) {
    console.log("Error logging in:", error.message);
  } else {
    console.log("Logged in user:", user);
  }
};
                            

5. Testing and Final Deployment

Once you've connected everything, test your app on Netlify to ensure that it deploys correctly. If there are any issues, don't worry—Netlify will show build logs so you can identify and fix errors. If everything works, your app will be live on the web!

And there you have it! You now have a full-stack web app hosted on Netlify with a PostgreSQL database via Supabase, along with authentication for secure access to your application.