Getting started with FTW
- basic command line
- text editing
This tutorial is the place to start your journey of getting hands-on with Sharetribe Flex. You will learn the basic building blocks by creating an example marketplace with on of the Flex Templates for Web (FTW).
Flex Templates for Web (FTW) are marketplace web applications built on top of the Marketplace API. While you can create a marketplace purely using just the API, it requires a lot of effort and we recommened using the template as a starting point for customizations.
Currently we have two templates is available:
- FTW-daily "Saunatime" - a rental marketplace with day-based bookings
- FTW-hourly "Yogatime" - a service marketplace with time-based bookings
Note: By default your Flex marketplace comes with day-based transaction process. If you want to start working with FTW-hourly, you need to change to the time-based process. See getting started with Flex CLI for more information.
Depending on your needs for customization, changing the template application requires varying levels of development knowledge. For this tutorial it is enough to know how to open a terminal to run some commands and edit text files to change configuration values.
For more information on what skills are needed for customization, see the What development skills are needed? article.
To use the Marketplace API, you will need a client ID. You can request access at https://sharetribe.typeform.com/to/BI9M4O
To get FTW up and running, you will need to download and install some basic development tooling:
Clone the Git repository:
git clone https://github.com/sharetribe/ftw-daily.git
NOTE: When starting an actual customization project, we recommend forking the Git repository instead of cloning it. This enables pulling in FTW updates later. However, for the purposes of this tutorial, cloning the repository is enough.
Go to the cloned directory:
Install all dependencies:
Start the configurations:
yarn run config
This command will create
.env file and guide you through setting up
the required environment variables. If the
.env file doesn't exist the
application won't start.
There are three required variables for FTW to work correctly:
Your application's client ID. You need this in order to access the Marketplace API with the SDK. You can find out what your application's client ID is in Flex Console.
If you don't set the client ID, API calls to the Marketplace API won't work in the application.
Public Stripe key enables payments using Stripe. You can follow How to set up and use Stripe guide to get the publishable key. You should also make sure you have enabled Stripe Connect in your platform.
If you don't set the Stripe key, payment's won't work in the application.
Mapbox access token is used for the maps in the marketplace. Follow the Mapbox set up guide to get your access token.
If you don't set the Mapbox key, the map components won't work in the application.
See the FTW Environment configuration variables for more information on the environment variables.
Start the development server:
yarn run dev
This will automatically open
http://localhost:3000 in a browser:
Now that we have the default template marketplace running, let's make some customizations!
src/marketplace.css file with a text editor and change the
--marketplaceColor to have a different value:
This will automatically refresh the browser and show the updated styles:
In this tutorial, we used FTW-hourly to make our own customized marketplace. As you see, FTW is a fully ready and polished marketplace application that is running on top of the Marketplace API. All of the customization is in your control, and you can change it to fit your marketplace needs. To start customizing FTW as you own marketplace, see the How to Customize FTW guide.