DEV Community

Ramandeep Singh
Ramandeep Singh

Posted on

Deploying Your Website with Supabase Hosting: A Step-by-Step Guide

#node #webdev #programming #beginners

Introduction

Supabase is not just a backend-as-a-service platform; it also provides a powerful hosting solution for your static websites. In this guide, we'll walk through the process of deploying a website using Supabase hosting, from setup to deployment.

Prerequisites

  • A Supabase account
  • Node.js installed on your local machine
  • Basic knowledge of HTML, CSS, and JavaScript
  • Your website files ready for deployment

Step 1: Setting Up Supabase

  1. Create a new project in Supabase:

    • Go to Supabase Dashboard
    • Click "New Project"
    • Fill in your project details
    • Wait for the project to be created

  2. Install Supabase CLI:

   npm install -g supabase
Enter fullscreen mode Exit fullscreen mode
  1. Initialize Supabase in your project: 
   supabase init
Enter fullscreen mode Exit fullscreen mode

Step 2: Configuring Your Project

  1. Create a supabase.json file in your project root: 
   {
     "public": {
       "bucket": "publicbucket"
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Set up environment variables: Create a .env file with your Supabase credentials: 
   SUPABASE_URL=your-project-url
   SUPABASE_KEY=your-anon-key
Enter fullscreen mode Exit fullscreen mode

Step 3: Preparing Your Files

  1. Organize your website files:

    • Place all static files (HTML, CSS, JS, images) in a directory
    • Ensure your main entry point is index.html

  2. Create a deployment script (deploy.js):

   const { createClient } = require('@supabase/supabase-js');
   const fs = require('fs');
   const path = require('path');

   const supabaseUrl = process.env.SUPABASE_URL;
   const supabaseKey = process.env.SUPABASE_KEY;
   const supabase = createClient(supabaseUrl, supabaseKey);

   async function deployFiles() {
     const publicDir = path.join(__dirname, 'public');
     const files = fs.readdirSync(publicDir);

     for (const file of files) {
       const filePath = path.join(publicDir, file);
       const fileContent = fs.readFileSync(filePath);

       const { data, error } = await supabase
         .storage
         .from('publicbucket')
         .upload(file, fileContent, {
           contentType: 'auto',
           upsert: true
         });

       if (error) {
         console.error(`Error uploading ${file}:`, error);
       } else {
         console.log(`Successfully uploaded ${file}`);
       }
     }
   }

   deployFiles();
Enter fullscreen mode Exit fullscreen mode

Step 4: Deploying Your Website

  1. Run the deployment script: 
   node deploy.js
Enter fullscreen mode Exit fullscreen mode
  1. Access your website: Your website will be available at: 
   https://[your-project-ref].supabase.co/storage/v1/object/public/publicbucket/index.html
Enter fullscreen mode Exit fullscreen mode

Step 5: Setting Up Custom Domain (Optional)

  1. Go to your project settings in Supabase
  2. Navigate to the "Custom Domains" section
  3. Add your domain and follow the DNS configuration instructions
  4. Wait for DNS propagation (can take up to 48 hours)

Best Practices

  1. File Organization:

    • Keep your project structure clean and organized
    • Use meaningful file names
    • Group related files in directories

  2. Performance Optimization:

    • Minify your CSS and JavaScript files
    • Optimize images before uploading
    • Enable gzip compression

  3. Security:

    • Never commit your .env file
    • Use environment variables for sensitive data
    • Set appropriate CORS headers

  4. Version Control:

    • Use Git for version control
    • Create a .gitignore file to exclude sensitive files
    • Commit your deployment scripts

Troubleshooting

  1. Upload Errors:

    • Check file permissions
    • Verify file sizes (Supabase has limits)
    • Ensure correct MIME types

  2. Access Issues:

    • Verify bucket permissions
    • Check CORS settings
    • Ensure correct URL structure

  3. Performance Issues:

    • Check file sizes
    • Verify caching headers
    • Monitor CDN performance

Conclusion

Supabase hosting provides a simple yet powerful way to deploy your static websites. With its integration with other Supabase services, you can easily add backend functionality to your static sites. The platform's CDN ensures fast delivery worldwide, and the straightforward deployment process makes it an excellent choice for developers of all levels.

Additional Resources

Top comments (0)