Learn how to install one of the Flex Templates for Web (FTW) to your local development environment.
- basic command line
- text editing
Table of Contents
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 significant amount of effort (both money and time) and we recommened using the template as a starting point for customizations.
The purpose of this guide is to clone and configure FTW-daily to your local development environment - and then get it up and running. This guide also helps you to create accounts to Stripe and Mapbox. Those services are needed to run the FTW-daily template app.
To get FTW up and running, you will need to download and install some basic development tooling:
- Open Terminal
Clone FTW-daily repository:
git clone https://github.com/sharetribe/ftw-daily.git
Go to the cloned directory:
After these steps you should have a directory structure that looks like this:
├── ext │ └── transaction-process ├── node_modules │ └── // dependencies ├── public │ ├── static │ ├── 500.html │ ├── index.html │ └── robots.txt ├── scripts │ ├── audit.js │ ├── config.js │ └── translations.js ├── server │ ├── auth.js │ ├── csp.js │ ├── dataLoader.js │ ├── env.js │ ├── importer.js │ ├── index.js │ ├── log.js │ ├── renderer.js │ └── sitemap.js ├── src │ ├── analytics │ ├── assets │ ├── components │ ├── containers │ ├── ducks │ ├── forms │ ├── translations │ ├── util │ ├── Routes.js │ ├── app.js │ ├── config.js │ ├── currency-config.js │ ├── default-location-searches.js │ ├── examples.js │ ├── index.js │ ├── marketplace-custom-config.js │ ├── marketplace.css │ ├── marketplaceFonts.css │ ├── marketplaceIndex.css │ ├── reducers.js │ ├── routeConfiguration.js │ ├── store.js │ └── stripe-config.js ├── CHANGELOG.md ├── LICENSE ├── README.md ├── app.json ├── package.json └── yarn.lock
Install dependency libraries:
FTW templates have 3 mandatory integrations that you need to configure before the app is fully functional. The app obviously needs to discuss with Flex Marketplace API, but the client app also makes direct calls to Stripe. Flex uses Stripe as a payment processor. And FTW-daily saves sensitive payment information directly to it.
The third default integration is to a map provider. Mapbox provides location search (geocoding) and maps for the web app.
FTW templates just need 4 environment variables to make these integrations work.
To use the Marketplace API, you will need a client ID. You can request access at https://www.sharetribe.com/products/flex/
When you get access, you will be able to log into Flex Console and check
the client ID.
Flex Console: Build > Applications
In addition, FTW templates use a transaction process that includes a privileged transition. That makes it possible to customize pricing on the small server that's included to the template. Client secret is needed to make this secure call from the template's own server to Flex API.
Both Flex API and your client app need to be able to discuss with Stripe API. Stripe has two different keys:
- Secret key for server-side requests
- Publishable key for calls from web browser
Flex API uses Stripe secret key to make payment-related requests when transaction moves forward. The client app needs to use Stripe publishable key to run stripe.js script. That script has two main functions, it has fraud detection build in and it is also used to save sensitive information directly to Stripe. E.g. credit card number is saved directly to Stripe.
Register to Stripe. After filling the form you will be asked the question "How do you want to get started with Stripe?". You can click "Skip for now" link at the bottom of the page to get directly to Stripe dashboard. Remember to confirm your email address after the registration.
As you will receive money from your users via your Stripe account, you have to provide some details such as your address and your bank account. In the Stripe dashboard, click the "Activate your account" link in the left menu and fill in all the fields according to the instructions. The activation form varies based on your country.
Stripe Connect is used to route payments between customers, providers (sellers), and marketplace, which is taking a commission from transactions.
Stripe Custom accounts are created to hold the provider's account information (e.g. payout details) on Stripe's side. A Custom Stripe account is almost completely invisible to the account holder, but marketplace operators see those on their Stripe dashboard.
If you're based in The United States, Stripe will need to review your platform account before you get access. See this article to learn how to apply for Stripe Connect review.
If you're in any another country, follow these instructions to enable Stripe Connect:
Click the Connect left menu item.
Click the Get started button.
After a few seconds, you should see your Connect dashboard. From the left sidebar, go to Settings then Connect settings, at https://dashboard.stripe.com/settings
Make sure that Custom is enabled in the Account types section
Great! You now have to get your API keys and input them into your marketplace.
- Click the Developers left menu item and go to Developers → API Keys.
In the section "Standard API keys" you will see two keys:
- Publishable key
- Secret key
The publishable key (with prefix pk) is one used in frontend application (e.g. Flex Template for Web) and secret key (with prefix sk) is the one you need to add to Console. If you want to use test data make sure the value of the key is eg. pk_test<somethinghere> and not pk_live<somethinghere>
Note: If you want to use test data in development make sure that "Viewing test data" toggle is on. This way no real money will be used. In production make sure that the toggle is off.
- Log in to Console and go to Build → Payments
- In the section Stripe configuration paste your secret key to "Stripe secret key" field and save the changes.
Note: secret key and publishable key needs to match with each others. You can't use publishable key from different Stripe account than the secret key - or mix test keys and live keys.
If you wish to create a new one, click "+ Create a token" button, give it a name and make sure all Public scopes are selected. Create the token and copy its value.
You can make access tokens in your web applications more secure by adding URL restrictions. When you add a URL restriction to a token, that token will only work for requests that originate from the URLs you specify. See the Mapbox documentation for domain restrictions.
Start the config script:
yarn run config
This command will ask the three required environment variables that you you collected in previous step.
After that, it will create
.env file to your local repository and
guide you through setting up the required environment variables. If the
.env file doesn't exist the application won't start. This
is only created for local development environment.
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:
In this tutorial, we used FTW-daily template to make our own customized marketplace. Here's a summary of those installation steps:
git clone https://github.com/sharetribe/ftw-daily.git cd ftw-daily/ yarn install yarn run config yarn run dev
As you can see from
http://localhost:3000, FTW is a fully ready and
polished marketplace application that is running on top of the
Marketplace API. Client app customization is in your control, and you
can change it to fit your marketplace needs. Check the
tutorial to learn how to customize FTW template.