Getting started with hubble Studio

This tutorial will help you learn how to deploy a demo project on hubble Studio to make it available on the web. It will also introduce some of hubble Studio’s key features to manage your application.

Prerequisites

Before getting started with this guide, there are a few prerequisites you need to have in place:

• Git client: You will need a git client installed on your local machine in order to connect to your self-hosted gitlab instance and manage your repositories. If you don't have a git client installed, you can download one from the official git website.

• Self-hosted GitLab instance: You will need to have access to a self-hosted GitLab instance set up in order to connect to hubble Studio.

• Hubble PWA: You will need to have a copy of the hubble PWA in one of your repositories in order to use it with hubble Studio. If you don't have a copy of the hubble PWA, you can download it from the hubble PWA GitHub repository and add it to your own repository.

• Shopware 6 Instance: You will also need to have a running instance of Shopware 6 available to you.

Once you have these prerequisites in place, you're ready to get started with hubble Studio!

Setting up your profile

Setting up your profile is the first step to using Hubble Studio. If you don't already have a profile, you can easily create one by visiting our website and signing up. Simply provide your email address, choose a password, and verify your profile by clicking on the link we send to your email.

If you have been invited to a existing Hubble Studio team, you can still create your own profile by following the same sign-up process.

After verifying your email and logging in to your profile, you can start creating a new project.

Creating a new team

Before you can start creating new projects with hubble Studio, you will need to create a new team, or join an existing one. In this guide we will simply create a new team:

1. Click on the "Create a new Team" button.
2. Choose a name for your team.
3. Click on the "Create Team" button.

Your new team is now created, and you're ready to start creating new projects with hubble Studio.

Creating Your First Project

Now that you've logged in to hubble Studio and created your first team, it's time to create your first project!

1. Select the team you have just created.

2. Click the "Create Project" button.

3. You will be prompted to select a template for your project. Currently, hubble Studio offers two different templates to choose from:

   • Shopware 6: This template is perfect if you're new to e-commerce and want to get started quickly. It includes all the features you need to start a new Shopware 6 instance.
   • hubble PWA: Use this template if you want to create a progressive web app (PWA) for your online store.

   For this guide we will be selecting hubble PWA as the template.

4. Once you've selected your desired template, give your project a name and click on "Continue".

5. Now you'll need to connect a Git repository to your project. We will be using a self-hosted Gitlab repository, containing your copy of hubble PWA:

   • URL: The complete URL of the repository you want to connect, e.g. https://gitlab.com/group/project.git
   • Project access token: A valid project access token with access to the repository.

6. Click "Add repository"

7. Next you'll need to set some environment variables to configure your hubble PWA:

   For these variables you can keep the default value:

   Name	Value	Description
   APP_BASE_URL	$HUBBLE_STUDIO_ENVIRONMENT_URL	The URL under wich your PWA will be accessible
   PLATFORM	shopware	The platform the PWA is targeting.
   SW_PAYMENT_FINISH_URL	https://${HUBBLE_STUDIO_ENVIRONMENT_URL}/checkout/success	The URL you are redirect to after finishing payment
   SW_PAYMENT_ERROR_URL	https://${HUBBLE_STUDIO_ENVIRONMENT_URL}/checkout/error	The URL you are redirect to after a payment failure

   For some you will need to provide your own value, following the description for guidance:

   Name	Description
   PLATFORM_BASE_URL	The full URL of the shopware instance, e.g. https://example.com
   API_BASE_URL	The full URL of the shopware store api, e.g. https://example.com/store-api
   API_SW_ACCESS_KEY	The access key of your shopware 6 api key.
   API_CLIENT_ID	The client id of your shopware 6 api key.
   API_CLIENT_SECRET	The client secret of your shopware 6 api key.

8. Finish creating the project by selecting a name for the initial environment

9. Click the "Create environment" button

Deploying Your Project

Now that you have created your project and connected your repository, it's time to deploy your project using hubble Studio. hubble Studio offers three different deployment strategies:

• Branch: With this option, hubble Studio will automatically deploy your project every time a new commit is pushed to the selected branch in your repository. This is the recommended option for most projects as it ensures that your site is always up-to-date.
• Tag: With this option, hubble Studio will deploy your project every time a new tag is pushed to your repository. This is useful if you want to deploy specific versions of your project, for your production environment for example.
• Manual: With this option, you can manually select a commit from your repository to deploy. This is useful if you want to test changes before deploying them to production.

After creating the project, the first deployment is started automatically. You can view the status of this deployment by opening the environment and clicking on the deployment status badge.

If your deployment was successful, you can open the environment using the specified permalink.

Conclusion

This is just the beginning of many exiting features awaiting you in hubble Studio! Why not try out some of these more advanced features:

• Custom Domains - With custom domains you can use your own domains for your projects.
• Access controls - Want to limit who can access your project? No worries, with our access controls you can limit access to your projects.
• Environment variables - Using environment variables allows you to configure your project’s functionality based on different parameters and deploy contexts.