You can build custom code features using the Dev environment at any point. Using these features in your Live marketplace requires the Extend plan. See details on Sharetribe's pricing.
Switching to Custom code mode means changing how your marketplace frontend application works. In No-code mode, the configurations and settings come exclusively from the Console. In Custom code mode, your marketplace frontend gets its features, configurations, and settings from both the Console and custom code. This guide walks you through the changes that you need to make when transitioning from no-code to custom code.
Before diving in, consider learning how Sharetribe’s technical infrastructure works. This glossary of technical terms may also be a helpful reference.
Hosting the marketplace frontend
Switching your hosting mode means that you are changing where your marketplace frontend application is hosted. You are switching from Sharetribe hosting your marketplace frontend to hosting the frontend yourself, which gives you the freedom to modify the frontend codebase.
After you create a Live environment, you should host three versions of your marketplace frontend application (a Dev version, a Test version, and a Live version) so that you can enact the recommended workflow. There are various hosting providers offering front-end application hosting. We recommend using Heroku or Render.
You can find technical guides on how to host your marketplace front end using Render or Heroku in our Developer documentation.
Marketplace frontend codebase repository
Changing the hosting mode from no-code to custom code lets you develop custom features and designs and enhance the functionality of your marketplace. Your custom code needs to be stored in a code repository, which is a database specialized for storing code files. We recommend using GitHub for this service.
If you are working with a developer, they can set this up for you. Ensure you have proper access to the repository: this is where the code created for you is ultimately stored. Repository applications like GitHub have “role” features that let you control ownership and access to your codebase.
Typically, you will start custom coding on top of the Sharetribe Web Template, an open-source marketplace frontend codebase.
Find technical guides on how to clone this template codebase and set up your repository in GitHub. If you prefer videos, check out our low-code tutorials on how to set up your development environment and how to connect your frontend codebase to a GitHub repository.
Configuring environment variables
When your marketplace frontend is not hosted on Sharetribe's servers, certain configurations called environment variables have to come from the codebase instead of Console. These are:
Your domain
Your marketplace name
Your Stripe publishable key (if you use Stripe)
Your SSO keys (if you use any Single Sign-On login)
In No-code mode, these variables are set in Console. In Custom code mode, these variables are set in the codebase directly. Therefore, transitioning to Custom code mode requires setting these variables in your codebase.
Adopting new testing and copy-to-live workflows
Whenever you develop new features with code or you want to make any no-code change, you will want to test it before making the changes live to your user. We recommend you use the following workflow when operating in Custom code mode:
Test code changes in the Dev environment. The Dev environment is connected to a custom code development frontend application, where changes are first coded and tested. For accurate testing, the Dev application works with the same no-code configurations as your Live application. Coding changes are then copied to Test and Live environments of your marketplace frontend.
Test no-code changes in the Test environment. The Test environment is connected to your custom code test frontend application, where no-code changes are first made and tested. For accurate testing, the custom code Test application has the same working code as the Live application. No-code changes are copied to Dev and Live environments in Console.
Copy Dev and Test changes to the Live environment. The Live environment is connected to a custom code live frontend application, where no-code and code changes are released after testing in Test and/or Dev. We don't recommend making direct changes in the Live environment.
How to transition from No-code mode to Custom code mode.
Start by setting up your Dev environment if you do not have one yet. Enable it by clicking the environment picker in the top left corner of your Console and choose Enable Dev environment.
Next, connect your Dev environment to a version of your marketplace frontend where you develop and test custom code features. This is the Dev version of your marketplace frontend. To get it working, you'll need to host the Dev marketplace frontend, store the code in a repository, and configure environment variables.
Then, you need to set up your Test environment and Test marketplace frontend. Switch your hosting mode in Console, host the Test marketplace frontend, store the code in a repository, and configure environment variables.
The Test environment is the environment you should use to preview no-code changes. It is important to keep your Test environment as identical as possible to your Live environment. The key to achieving this is ensuring that the final version of any code changes from Dev is deployed to your Test marketplace and your Live marketplace.
Once you complete a no-code change, you should test it to make sure it works as expected before copying the changes to Live. You should copy these changes also to your Dev environment so that new coding changes can be developed against the latest no-code configurations of your marketplace.
The final piece is the Live environment and Live marketplace frontend.
If you already have a Live environment operating in No-code mode, switch it to Custom code mode. After, you'll need to host the Live marketplace frontend, store the code in a repository, and configure environment variables. Once done, your Live marketplace incorporates the latest working no-code and code releases when you copy changes there. Your Sharetribe Marketplace URL will automatically redirect to your new one.
If you are subscribing and creating your Live environment for the first time, and your marketplace frontend is custom coded, make sure you select the Dev environment as the source of information for the new Live environment.
Taking Sharetribe's new no-code features into use on a custom-coded marketplace
Once you've made the switch to Custom code mode, your marketplace will no longer automatically get Sharetribe's new no-code features. This is because the custom code you have written may conflict with the new feature built by Sharetribe. For example, let's say that you have adjusted the layout of the availability calendar, and Sharetribe releases a change that also makes changes to the calendar. Your custom code and Sharetribe's update might not mesh.
So whenever Sharetribe releases a new version of the Sharetribe Web Template, you need to decide if you want to take it into use. It's optional: you don't need to update your Template if you don't need the new additions built by Sharetribe.
To update your Template to the latest version and get the latest features, you need to download the latest updated Template code and merge it with your customized version to see if there are conflicts. If there are no conflicts, the upgrade process might take no more than 15 minutes. In some cases, though, it can take significant development work to resolve the conflicts. If you are not an experienced developer, this may require help from a Sharetribe Expert.
If you end up making large changes to the Sharetribe Web Template codebase (for example, modifying the layout and workflows of most pages significantly), you might reach a point where it no longer makes sense to try to keep your Template up-to-date with the most recent changes introduced by Sharetribe. Instead, you can evolve your marketplace functionality solely through custom development.