One place for hosting & domains

      blog

      WordPress Widgets & Sidebars: Everything You Need to Know


      Possibly WordPress’s strongest selling point is how customizable it is, even for beginners. Of course, you still have to understand the platform’s fundamental features if you want to get the most out of your site. Learning how sidebars and Widgets function is an excellent first step.

      WordPress Widgets are handy little modules that enable you to add specific functionality to sidebars and footers of Classic themes. Even better, you don’t need to know any coding to use them. Thanks to Widgets, you can use your sidebars to display images, recent posts, a search bar, and much more.

      An Introduction to WordPress Widgets and Sidebars

      the WordPress posts page

      There are a few ways that WordPress helps you customize the look and functionality of your website, even if you’re not a designer. For example, themes enable you to make large-scale changes to your site’s appearance. However, what if you want to add specific features to your web pages instead?

      Enter Widgets — simple but flexible options that are included in WordPress by default. Widgets are small, pre-built modules that add new functionality to your site. Using a widget, you can include features such as a search bar, a list of recent posts, a custom menu, and much more. Plus, the method of actually placing a widget on your site couldn’t be easier.

      As for where they go, there are one or more designated ‘widget areas’ on your site. These can often vary depending on your theme. However, in general, they’re in your site’s sidebar(s) and footer. Therefore, Widgets can build out your sidebars and similar elements, so you can customize what they contain.

      How to Add Widgets to Your WordPress Site

      It’s always easiest to understand how a feature works by seeing it in action. So, let’s walk through exactly how to use Widgets within WordPress.

      There are two ways to add Widgets to your site. You’ll want to head to your dashboard and then navigate to either Appearance > Customize or Appearance > Widgets. Keep in mind that the Site Editor doesn’t use Widgets, so you can’t perform either of these methods with a block theme.

      Since the WordPress Customizer enables you to see changes to your site as you make them, we’ll use the first method. Once you’re in the Customize screen, click on the Widgets tab:

      customizing the WordPress sidebar

      Here, you’ll see a list of the widget areas on your site. Again, what these areas are (and where they’re located on your pages) will vary based on the theme you’re using. In our example, we’re using WordPress’ Twenty Seventeen theme, which has one sidebar on the right side of the page and two separate footers.

      Click on the widget area you’d like to customize. You’ll probably see a few Widgets listed there already. For example, Twenty Seventeen has two Text Widgets and a Search widget in the sidebar by default:

      customizing the WordPress sidebar widget

      Select the Add a Widget button, and you’ll see a list of all the options you can place in your widget area. Let’s say you wanted to include a list of categories in your sidebar. You would simply click on the Categories widget, and it will appear in the list on the left:

      sidebar customization settings in WordPress

      To customize the widget itself, click on the small arrow in the right corner. Each widget has unique options. For example, the Categories widget enables you to set a title and choose from a few settings.

      If you want to remove a widget, you can click on Delete at the bottom of its window. To reorder the Widgets, select one and drag it up or down:

      editing categories in the WordPress sidebar widget

      On the right-hand side of the page, you can see your live changes take effect. For example, dragging the Categories widget into your sidebar makes it immediately appear on the page.

      You can do this with all of your site’s widget areas, tweaking them until you’re happy. When you’re done, don’t forget to hit the Publish button to save your changes!

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Exploring WordPress’s Default Widget Options

      Once you’ve added Widgets to your WordPress site and browsed the list of default options, you may be wondering what all these modules actually do. We won’t go over every single widget here, but let’s touch on a few of the most useful ones.

      First, the Text widget is the most flexible of the bunch. If you open it, you’ll see an abbreviated version of the Classic editor:

      editing headings in the WordPress Customizer

      Using this widget, you can add text, links, and various types of media to your sidebars and footers. You can even use the Text tab to include code — which means you can add nearly any feature to your widget areas.

      Next up, the Search widget is potentially the most straightforward option. This can add a search bar to your website:

      the WordPress site search widget

      Since users may want to search your content to find specific information, this can be an essential widget. If your website has a catalog or archive, you may want to add this feature.

      For a blog or a news site, the Recent Posts widget can be a smart inclusion:

      WordPress recent posts widget settings

      This will display a short list of your recent posts in the widget area, enticing visitors to read your latest (and hopefully greatest) content. You have the option of setting a custom title, the number of posts shown, and each post’s date.

      Finally, you may also want to check out the Navigation Menu widget:

      the WordPress navigation menu widget

      Most themes have one or more menus built into their design. However, you can use Widgets to place additional menus within your sidebars and footers.

      WordPress offers more Widgets than we can cover here, and it’s worth familiarizing yourself with all of them. Most are very self-explanatory, but if you have any trouble, you can check out the WordPress Codex for more details.

      4 Plugins to Help Supercharge Your WordPress Widgets

      While WordPress’ default Widgets are powerful, some users might want more options. Additionally, you may benefit from having more control over your sidebars, footers, and other widget areas. These four plugins offer you extra choices and flexibility when it comes to your Widgets and sidebars.

      1. Recent Posts Widget With Thumbnails

      Recent Posts Widget with Thumbnails WordPress plugin

      As we discussed above, WordPress already has a Recent Posts Widget. However, it will simply display links to your latest posts. Adding an image to each post is a great way to draw more attention to this element and help your sidebars look more attractive. Recent Posts Widget With Thumbnails is a simple but effective free plugin that enables you to achieve this.

      2. Top Posts & Pages Widget by Jetpack

      Jetpack WordPress plugin

      What if, instead of showing off your most recent posts, you want to direct visitors towards your best content? Jetpack’s Top Posts & Pages Widget enables you to showcase the posts that are already doing well. You can either display your most liked posts or the content that has received the most traffic over the past two days.

      3. SiteOrigin Widgets Bundle

      SiteOrigins widgets bundle

      The previous two plugins include only a single widget, which is great if you only need one specific feature. SiteOrigin Widgets Bundle, on the other hand, adds dozens of new Widgets to your site. Using this plugin, you’ll be able to place various elements in your sidebars and footers, including buttons, maps, post carousels, social media links, and more.

      4. Custom Sidebars

      WordPress Custom Sidebars plugin

      In general, adding a widget to your sidebar means it will show up in the same place on every page and post. However, it’s common to want to display different features and information on various parts of your site. Custom Sidebars lets you change up which Widgets appear on different pages, along with providing a host of other customization options.

      Add WordPress Widgets to Your Sidebars

      When designing your site, it’s important not to forget about your sidebars and footers. Optimizing these areas is key to building effective and user-friendly pages. Fortunately, WordPress Widgets dramatically simplify the process of adding useful features to your site.

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link

      How to Install WooCommerce on Your WordPress Website


      If you’re planning on using WordPress to create an online store, you’ll strongly want to consider installing WooCommerce. This plugin has become the de facto e-commerce solution for WordPress sites, thanks to its flexibility and a wide variety of customization options. However, given its wealth of features, it can be daunting to get started.

      Fortunately, WooCommerce is very easy to set up. Any e-commerce newbie can download, install, and configure the plugin to create a functional online store in no time. Even smaller tasks, like managing your products and configuring costs, are easy to handle.

      Getting Started With WooCommerce

      WooCommerce

      According to BuiltWith, WooCommerce powers 26% of all e-commerce sites. This makes it the most popular e-commerce solution in the world, and it’s not hard to see why. All you need is a WordPress site and the WooCommerce plugin to create a fully-functional, secure, and visually appealing store.

      What’s more, WooCommerce offers a lot of customization opportunities and scalability. The basic, free plugin will be enough for most online stores.

      WooCommerce also provides plenty of options to grow, scale, and expand your business as it becomes more successful. There are WooCommerce extensions, which add new functionality to your store, as well as dedicated themes like Storefront that help you perfect its appearance.

       

      With all of this in mind, it’s easy to see why you should consider WooCommerce when creating your online store in WordPress. It’s an excellent choice for beginners and experienced professionals alike. Now, let’s take a closer look at how the plugin works in practice.

      How to Install and Set Up WooCommerce (In 5 Steps)

      Creating and configuring your WooCommerce store is a pretty simple process. However, before you get started, it’s important to take a look at the recommended server requirements for WooCommerce:

      If your server does not meet these recommended minimums, your store will struggle, and it might not even work at all. One solution is to take advantage of our WooCommerce hosting plan:

      DreamHost WooCommerce hosting

      This plan comes with WooCommerce pre-installed, as well as several additional plugins and themes to make your store even better. Plus, essential considerations such as security, performance, and updates will be handled for you.

      Once you have your website and hosting plan ready, it’s time to create your WooCommerce store!

      Step 1: Install and Activate the WooCommerce Plugin

      WooCommerce WordPress plugin

      This first step is the most basic one. Simply install and activate WooCommerce just as you would any other plugin. As soon as you activate it, you will be presented with the WooCommerce setup wizard. This will help you configure your store, and we’ll look more closely at it in a moment.

      First, let’s see how activating WooCommerce has affected your site. Once WooCommerce is installed, you’ll find a number of new features, including:

      • Two new user roles: Customer and Shop Manager.
      • Widgets to help you display products in various ways.
      • Custom post types, taxonomies, and menu items.
      • Several shortcodes for inserting content into posts and pages.

      It’s worth noting that WooCommerce works a little differently on a WordPress Multisite install. Each site will share a database but store information in separate data tables. This setup makes each store its own separate entity. You will not be able to share information between the stores, such as user accounts, products, or checkout information. However, you can share extensions and themes across multiple WooCommerce sites.

      If you’re using a single WordPress site, you don’t need to worry about any of that.

      Now, it’s time to start configuring your store using the wizard we mentioned earlier.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Step 2: Add Your Store’s Basic Information

      The first thing you’ll see after activating the WooCommerce plugin is the setup wizard. This will help you set up your site in a few simple steps. It’s worth noting that any settings you configure here can easily be changed later.

      The first page of the wizard contains general information about your store. You’ll be required to enter your store’s location, for instance. If your business does not have a physical location but is entirely based online, you will still need to select your country:

      WooCommerce store setup wizard

      You’ll then need to choose the currency you want to use. Your store can only use one currency at a time, but if you want to display prices in various currencies, you can use a plugin like Currency Converter Widget.

      The last option asks what type of products you plan on selling: physical, digital, or both. There are more specific product types (which we’ll look at later), but for now, you can select the option that best suits your needs. The final option is a checkbox that you should only tick if you’re also planning on selling items in person.

      When you’ve entered all the required information, click on Let’s go! to proceed to the next step.

      Step 3: Set Up Your Payment Options

      The next phase of the wizard lets you enter the payment options for your store. Here you can choose which payment methods you want to accept:

      WooCommerce payment configuration options

      The choices you’ll see will differ slightly depending on your specified location and the options you selected on the previous page:

      • PayPal and Stripe are always available.
      • Square is available if you selected the option to sell items in person and if your store is located in the U.S., the U.K., Canada, Australia, or Japan.
      • Klarna is also available if your store is in the U.K., Norway, Finland, Sweden, Denmark, Austria, Germany, or the Netherlands.

      Select the options you want to use, and WooCommerce will install the necessary extensions. You can always remove and add payment methods later.

      The final option in this section asks if you want to accept offline payments. If you select this, a panel will appear with more detailed options, letting you choose all payment types you’re willing to use:

      configuring accepted payment methods in WooCommerce

      When you have picked all the payment options you’ll need, click on Continue to proceed to the next page of the wizard.

      Step 4: Configure Your Shipping Settings

      It’s now time to configure your shipping settings. As with the last step, the options here will differ depending on your location. Stores in the U.S. and Canada will see settings relating to USPS and Canada Post, respectively:

      WooCommerce shipping settings

      If you want to use these services, we recommend taking a look at their specific settings to help you settle on appropriate rates.

      Stores located elsewhere will instead only see the options for specifying the weight and dimension units you want to use in your store. Simply choose the correct units, then select Continue to progress.

      Step 5: Complete the Installation Process

      The final steps of the wizard offer some additional options to help you get your store off the ground. The Extras section contains two choices:

      WooCommerce extras settings screen

      The first one asks if you want to install the Storefront theme. This is the official WooCommerce theme, which is highly recommended, as it’s built specifically to support sites powered by WooCommerce.

      You can also choose if you want WooCommerce to calculate tax rates for you automatically. This may be a better option than manually entering tax rates, depending on your location and business. We suggest that you consult with a professional about how your business should handle taxes.

      When you select Continue, you’ll come to the final step. Here you can connect your store to Jetpack, a useful plugin that will activate several additional services (such as live rates and automatic taxes):

      connect WooCommerce to Jetpack

      Click on Connect with Jetpack or Skip this step to complete your installation. Your store is now ready to go! If you want to configure it even further, we recommend checking out the official documentation to see all the available options.

      Adding Your First Product in WooCommerce

      With your store up and running, it’s time to create something to sell. There are plenty of product types you can use, but for this example, we’ll create a “simple” product. This is the most basic and common product type, meant to be used for physical products that will be shipped and require no additional options.

      To create a product, go to WooCommerce > Products > Add New. This opens the Add new product interface, which should look familiar if you’re used to creating blog posts in WordPress:

      adding a new product in WooCommerce

      Start by giving your product a title and description. You can also assign it to one or more product categories to keep everything organized.

      To configure your product’s settings, you can use the Product Data meta box. You’ll spend most of your time here when managing products, as it covers the most essential information:

      WooCommerce product data

      The first option is the product type, so leave this as Simple product. Then, state whether the product is Virtual or Downloadable. The rest of this section consists of several panels with additional options:

      • General is where you can set the product’s Stock Keep Unit (SKU) and price.
      • Inventory can be used to manage the product’s stock levels.
      • Shipping lets you specify the product’s weight and dimensions.
      • Linked Products can be used to cross-promote similar products or to create product groups.
      • Attributes let you assign attributes to the product, which is a way to connect items with similar characteristics.
      • Advanced contains advanced options, such as the ability to set up orders for the product and create a purchase note.

      These are the basics for creating a product, but there’s plenty more you can do. For instance, you can add product images, create variable products, and learn more about the different product types.

      Feel free to experiment with the editor, and refer to the official documentation whenever you need help. It won’t be long until your online store is off the ground and your wallet is feeling the benefits of your hard work!

      Uninstalling WooCommerce or Reverting to an Earlier Version

      If you want to shut down your store for any reason, you can’t just deactivate and uninstall WooCommerce. This is because the actual store data, such as your settings, orders, customer details, and products, will still be saved in your database.

      To delete all WooCommerce data, you will need to make an edit to your site’s wp-config.php file. This is the file that controls your site’s databases. All you need to do is add a single function to it.

      Copy and paste the following code into your wp-config.php file:

      define( 'WC_REMOVE_ALL_DATA', true);

      Make sure to place this snippet on its own line, right above the final comment in the file. This will clear all WooCommerce data from your database.

      Finally, you should always use the most up-to-date version of your plugins. However, if you do need to install an earlier version of WooCommerce, perhaps for testing purposes, you can do so from the Advanced options on the plugin’s directory page.

      First, you will need to restore a previous backup of your store’s database and uninstall the plugin. You can then use the Previous Versions section on the plugin page to select the one you want:

      When you’ve selected the preferred version, click on Download to get a .zip file of the plugin. You can now upload and install the plugin as usual.

      Create Your Online Store With WooCommerce

      WooCommerce is a terrific option for WordPress users who want to create an online store. Its user-friendly design makes it possible for beginners and experienced users alike to turn their WordPress websites into e-commerce businesses.

      To get started, simply install and activate the plugin on your WordPress site and enter some details about your store and products. Then, you can start adding items to your shop.

      Are you looking to build a fast and secure WooCommerce store? Our WooCommerce hosting solutions can help you speed up your site and grow your online business!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      Managed WordPress Hosting - DreamPress



      Source link

      How to Self-host Supabase with Docker


      Supabase is an open source Firebase alternative featuring a Postgres database, user authentication, and REST API capabilities. It offers a robust framework for creating the backend to Angular, React, Next.js, and other frontend applications.

      This tutorial, the first in our series on Supabase, introduces you to the basics of Supabase. It covers installing your own self-hosted Supabase instance with Docker, setting up an initial configuration, and securing your instance.

      Before You Begin

      1. Familiarize yourself with our
        Getting Started with Linode guide, and complete the steps for setting your Linode’s hostname and timezone.

      2. This guide uses sudo wherever possible. Complete the sections of our
        How to Secure Your Server guide to create a standard user account, harden SSH access, and remove unnecessary network services.

      3. Update your system.

        • Debian and Ubuntu:

            sudo apt update && sudo apt upgrade
          
        • AlmaLinux, CentOS Stream, Fedora, and Rocky Linux:

            sudo dnf upgrade
          

      Note

      This guide is written for a non-root user. Commands that require elevated privileges are prefixed with sudo. If you’re not familiar with the sudo command, see the
      Users and Groups guide.

      How to Install Supabase with Docker

      Docker is the recommended solution for self-hosting Supabase. Moreover, Docker’s containerization makes setting up and managing a platform like Supabase more convenient.

      These next few sections show you how to use Docker and Docker Compose to get your own Supabase instance up and running. This includes steps for installing Docker and downloading the necessary Supabase files.

      Afterward, keep reading to see how you can start configuring your instance to fit your security needs.

      Installing Docker and Docker Compose

      The first step is to install Docker and Docker Compose. Docker runs your Supabase instance while Docker Compose organizes and coordinates the instance’s parts.

      1. Install Docker using the steps outlined in sections two and three of the following guides, depending on your Linux distribution.

      2. Install the Docker Compose plugin using your distribution’s package manager.

        • Debian and Ubuntu:

            sudo apt install docker-compose-plugin
          
        • AlmaLinux, CentOS Stream, Fedora, and Rocky Linux:

            sudo dnf install docker-compose-plugin
          
      3. Verify your Docker Compose installation:

         docker -v
        

        Your version may be different the one shown below, but that’s okay, you just want to get a version response:

        Docker version 20.10.17, build 100c701

      Download the Supabase Repository

      Supabase operates its Docker Compose setup out of its Git repository. Thus, you need to download your own copy of the repository to run your Supabase instance. Once you have it, the cloned repository houses your Supabase files and configuration.

      1. Clone the Supabase repository from GitHub. This creates a supabase subdirectory to your current directory:

         git clone --depth 1 https://github.com/supabase/supabase
        

        Note

        You may first need to install Git. Typically, you can do so through your system’s package manager.

        Debian and Ubuntu:

        sudo apt install git
        

        AlmaLinux, CentOS Stream, Fedora, and Rocky Linux:

        sudo dnf install git
      2. Change into the repository’s Docker subdirectory:

         cd supabase/docker
        
      3. Make a copy of the included configuration file, .env.example. For now, you can leave the contents of the file as is, but this file is where most of your instance’s configuration resides. Later, you can get some ideas for how to customize it for your security needs:

         cp .env.example .env
        

      Run Supabase

      You are now ready to start running your Supabase instance. You can start it up by running the appropriate Docker Compose command within the supabase/docker subdirectory:

      sudo docker compose up -d
      

      If you’re on a local machine, simply, navigate to localhost:3000 in your web browser to see the Supabase interface:

      Supabase dashboard

      However, if you are wanting to access Supabase remotely, you need to open the port in your system’s firewall. You can learn about how to do so through our guide on
      securing your server.

      You also need to modify the URL values in your Supabase instance’s configuration to match your server’s remote address. Open Supabase’s .env file, and change the SITE_URL, API_EXTERNAL_URL, and PUBLIC_REST_URL variables, replacing localhost with your server’s remote address.

      This example uses a remote IP address of 192.0.2.0 for the server and assumes Supabase’s default ports:

      File: .env
      # [...]
      ## General
      SITE_URL=http://192.0.2.0:3000
      # [...]
      API_EXTERNAL_URL=http://192.0.2.0:8000
      
      # [...]
      
      ############
      # Studio - Configuration for the Dashboard
      ############
      
      STUDIO_PORT=3000
      PUBLIC_REST_URL=http://192.0.2.0:8000/rest/v1/ # replace if you intend to use Studio outside of localhost

      Similar changes need to be made again should you alter the server address or the instance’s ports. That is the case with the steps for implementing a reverse proxy server as shown further on in this tutorial.

      Once you have made the updates, restart your instance:

      sudo docker compose down
      sudo docker compose up -d
      

      After making the above preparations, you can access the Supabase interface remotely by navigating to port 3000 on your server’s remote IP address. For instance, if your server’s remote IP address is 192.0.2.0, navigate in a web browser to http://192.0.2.0:3000.

      Note

      You may need to open the port in your system’s firewall. You can learn about how to do so through our guide on
      securing your server.

      How to Configure Supabase

      With your Supabase instance up and running, you can now adjust its configuration to fit your needs.

      Much of the Supabase configuration is controlled via the .env file as shown in the previous section. Open that file with your preferred text editor, make the desired changes, and save the file. For the changes to take effect you then need to stop your Supabase services and start them back up, like so:

      sudo docker compose down
      sudo docker compose up -d
      

      Securing Supabase

      The next several sections of this tutorial show you specific configurations you can use to make your Supabase instance more secure. This includes applying API keys and secrets as well as using a reverse proxy with SSL.

      Generating API Keys and Secrets

      Setting keys and secrets for your Supabase instance helps keep it secure. Doing so is actually part of the basic setup steps in Supabase’s documentation. These should certainly be set before running the instance in any production context.

      1. Generate two passwords without special characters and consisting of at least 32 characters, referred to henceforth as examplePassword1 and examplePassword2. You can generate random passwords for this purpose using Bitwarden’s
        password generator.

      2. Navigate to Supabase’s
        API-key generator. This tool takes examplePassword2 and creates two specific JavaScript Web Tokens (JWTs) from it. Input examplePassword2into the JWT Secret field, and make sure ANON_KEY is selected as the Preconfigured Payload. Then, click the Generate JWT button to generate exampleJWT1 and save it along with your passwords.

        Using a random example password like from above, the result could look like:

        eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UiLAogICAgImlhdCI6IDE2NjE3NDkyMDAsCiAgICAiZXhwIjogMTgxOTUxNTYwMAp9.uUxRvehMuKsaDDvaQlm-phfgB58NjkiH7dg05kpnO8s
      3. Repeat the above step, input examplePassword2into the JWT Secret field, but this time select SERVICE_KEY as the Preconfigured Payload. Click the Generate JWT button to generate exampleJWT2 and save it along with your passwords.

        Using the same random example password, the result may resemble:

        eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZSIsCiAgICAiaWF0IjogMTY2MTc0OTIwMCwKICAgICJleHAiOiAxODE5NTE1NjAwCn0.93ec0gljiKlnrPUGEBqGOukXoNymz6EBgtHK33zkYpI
      4. Open the .env file in your supabase/docker directory. Replace the values for POSTGRES_PASSWORD, JWT_SECRET, ANON_KEY, and SERVICE_ROLE_KEY with your examplePassword1, examplePassword2, exampleJWT1, and exampleJWT2, respectively:

        File: .env
        1
        2
        3
        4
        5
        6
        
        # [...]
        POSTGRES_PASSWORD=examplePassword1
        JWT_SECRET=examplePassword2
        ANON_KEY=exampleJWT1
        SERVICE_ROLE_KEY=exampleJWT2
        # [...]
      5. Open the Kong configuration file, which is located at volumes/api/kong.yml in the supabase/docker directory. Find the consumers section of the file, and replace the key values under the anon and service_role usernames with your exampleJWT1 and exampleJWT2, respectively:

        File: volumes/api/kong.yml
        1
        2
        3
        4
        5
        6
        7
        
        consumers:
        - username: anon
          keyauth_credentials:
          - key: exampleJWT1
        - username: service_role
          keyauth_credentials:
          - key: exampleJWT2
      6. Restart your Supabase instance for these changes to take effect:

         sudo docker compose down
         sudo docker compose up -d
        

      Using a Reverse Proxy

      NGINX provides an excellent proxy. It routes traffic between the various Supabase endpoints, giving you control over what gets exposed and how.

      Moreover, using NGINX gives a solution for applying SSL certification to your endpoints. Doing so, which is outlined in the next section, provides a vast improvement to your server’s security.

      1. Install NGINX. Follow steps two and three from our guide on
        How to Install and Use NGINX. Use the drop down at the top of the guide to select your Linux distribution and get the steps matched to it.

        Additionally, follow any directions in the above guide related to locating and preparing the NGINX default configuration. On Debian and Ubuntu, for instance, this just means finding the configuration file at /etc/nginx/sites-available/default. On AlmaLinux, by contrast, you need first to comment out a section in the /etc/nginx/nginx.conf file and create a /etc/nginx/conf.d/example.com.conf file (replacing example.com with your domain).

      2. Open the NGINX configuration file that you located/created as part of the above step. For this and following examples, the location is presumed to be /etc/nginx/sites-available/default, but know that your location may be different. Remove the configuration file’s default contents, and replace them with the following contents. Be sure to replace the example IP address 192.0.2.0 with your server’s IP address and example.com with your domain.

        File: /etc/nginx/sites-available/default
        map $http_upgrade $connection_upgrade {
            default upgrade;
            '' close;
        }
        
        upstream supabase {
            server localhost:3000;
        }
        
        upstream kong {
            server localhost:8000;
        }
        
        server {
            listen 80;
            server_name localhost 192.0.2.0 example.com;
        
            # REST
            location ~ ^/rest/v1/(.*)$ {
                proxy_set_header Host $host;
                proxy_pass http://kong;
                proxy_redirect off;
            }
        
            # AUTH
            location ~ ^/auth/v1/(.*)$ {
                proxy_set_header Host $host;
                proxy_pass http://kong;
                proxy_redirect off;
            }
        
            # REALTIME
            location ~ ^/realtime/v1/(.*)$ {
                proxy_redirect off;
                proxy_pass http://kong;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
                proxy_set_header Host $host;
            }
        
            # STUDIO
            location / {
                proxy_set_header Host $host;
                proxy_pass http://supabase;
                proxy_redirect off;
                proxy_set_header Upgrade $http_upgrade;
            }
        }
            
      3. Restart the NGINX service, which you can typically do with:

         sudo systemctl restart nginx
        

      Afterward, you should be able to access the Supabase dashboard without having to specify port 3000.

      Note

      Should you encounter a “bad gateway” error, your system may be denying NGINX due to SELinux rules. You can verify this by checking the NGINX logs at /var/log/nginx/error.log and looking for “Permission denied”.

      According to Stack Overflow, the issue can typically be resolved with the following command. This allows NGINX to make network connection on your system:

      sudo setsebool -P httpd_can_network_connect 1
      

      Adding an SSL Certificate

      The following steps show you how to apply an SSL certificate to Supabase using
      Certbot. Certbot allows you to easily request and download free certificates from
      Let’s Encrypt.

      With an SSL certificate, your instance’s traffic gets encrypted and secured over HTTPS.

      1. Follow along with our guide on
        Enabling HTTPS Using Certbot with NGINX up to the step for executing the certbot command. Be sure to select the appropriate Linux distribution from the dropdown at the top of that guide.

      2. Certbot needs to use port 80 for Let’s Encrypt verification, so temporarily stop NGINX:

        sudo systemctl stop nginx
        
      3. This guide uses a variant of the certbot command to retrieve the certificate only and to use a standalone verification method. Doing so gives more control over how the certificate is applied.

        You can achieve this with the command:

        sudo certbot certonly --standalone
        

        Follow along with the prompts, entering an email address for renewal notifications, accepting the terms of service, and entering your server’s domain name.

        Take note of the locations of your certificate files. Certbot outputs these locations upon success, and you need these locations for the next step. Typically, the locations resemble the following, replacing example.com with your actual domain name:

        /etc/letsencrypt/live/example.com/fullchain.pem;
        /etc/letsencrypt/live/example.com/privkey.pem;
        
      4. Open your NGINX configuration file again (typically located at /etc/nginx/sites-available/default. Make the following changes to the beginning of the server section.

        Be sure to replace the ssl_certificate and ssl_certificate_key values here with the locations of the fullchain.pem and privkey.pem files created by Certbot. And replace the example.com in the server_name with your domain name:

        File: /etc/nginx/sites-available/default
        # [...]
        server {
            listen      80;
            server_name localhost;
            access_log  off;
            rewrite ^ https://$host$request_uri? permanent;
        }
        
        server {
            listen 443 ssl;
            server_name example.com;
        
            ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
            ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
        # [...]
            
      5. Restart NGINX:

         sudo systemctl start nginx
        

      Now, you can access your Supabase instance in a web browser via the HTTPS version of your domain. And you can be assured that your Supabase instance is secured using SSL certification.

      Note

      You can optionally also add your server’s remote IP address to the NGINX configuration above and use that as well. However, you may receive a certificate warning in your browser. This is because the certificate was issued for your server’s domain name, not its IP address.

      Conclusion

      Now you have your Supabase instance running and configured for your security needs. Take advantage of your instance by reading the
      Supabase documentation. There, you can find guides on getting started with the wide range of features Supabase has to offer.

      And continue learning with us in our upcoming series of guides on Supabase. These cover everything from setting up your instance, to linking your instance to Linode Object Storage, to building JavaScript applications with Supabase.

      Have more questions or want some help getting started? Feel free to reach out to our
      Support team.

      More Information

      You may wish to consult the following resources for additional information
      on this topic. While these are provided in the hope that they will be
      useful, please note that we cannot vouch for the accuracy or timeliness of
      externally hosted materials.



      Source link