The responsible social network.
This repository contains the source code for Vouch -- a social network that is:
- Ad free
- Member supported, and
- 100% open source
Along with the source code, the Vouch team is also developing a course with a goal of walking you through the construction and architecture of this codebase -- from npm init
through to credit card payments. It's still in-progress, and currently completely free.
So you want to get Vouch running locally and then deploy your own copy? Here's how.
Before starting, you'll need accounts with a couple of services:
- Firebase (with a plan that allows for communication with external APIs, like the Blaze plan)
- Stripe
Once you have these accounts, you'll need to prepare the following information:
- Your Firebase config object (which you can find in the Firebase console)
- A Firebase service account JSON file (which you can create in the Firebase console under Project Settings / Service accounts)
- A Stripe test api key, secret key, webhook secret and product id
Vouch reads the available product plans directly from Stripe. It expects that all available plans will be created under the same Product object, and looks for a list of available plans under the product metadata's publicPlanIds
key.
Here's what the relevant settings look like for Vouch itself:
Vouch also reads plan information from each plan's metadata. Here's an example of what this configuration looked like at the time of writing:
Once you've got the config ready, start by cloning the repository and installing its dependencies. Vouch manages its dependencies with yarn, but npm may work too.
git clone [email protected]:frontarm/vouch.chat.git vouch
cd vouch
yarn install
cd functions
yarn install
cd ..
To run the app locally, you'll need to create some configuration files.
cp .env.example .env.development.local
cp functions/.runtimeconfig.json.example functions/.runtimeconfig.json
You'll then need to fill in these files with the settings you prepared earlier:
- Add your Stripe configuration to
.runtimeconfig.json
- Add your Firebase config and Stripe public key to
.env.development.local
The end result should look something like this:
// .runtimeconfig.json
{
"stripe": {
"product_id": "prod_lololololololo",
"secret_key": "sk_test_lololololololololololololololololo",
"webhook_secret": "whsec_lolololololololololololololololo"
}
}
// .env.development.local files
REACT_APP_FIREBASE_API_KEY=lolololololololo_lololololololololololo
REACT_APP_FIREBASE_AUTH_DOMAIN=something.firebaseapp.com
REACT_APP_FIREBASE_DATABASE_URL=https://something.firebaseio.com
REACT_APP_FIREBASE_PROJECT_ID=something
REACT_APP_FIREBASE_STORAGE_BUCKET=something.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=111111111111
REACT_APP_FIREBASE_APP_ID=1:111111111111:web:1lololololololol
REACT_APP_STRIPE_API_KEY=pk_test_lololololololololololololololololo
You'll also need to copy your firebase service account JSON file to functions/.serviceaccount.json
The configuration files are all listed in .gitignore
, so that you don't accidentally push any configuration to a public repository.
The Firebase CLI tool looks for the current project's app ID in a file could .firebaserc
-- which you'll need to create. The easiest way to do this is by running firebase use --add
, selecting a project, and then naming it default
when prompted:
$ firebase use --add
? Which project do you want to add? vouchchat
? What alias do you want to use for this project? (e.g. staging) default
Created alias default for vouchchat.
Now using alias default (vouchchat)
You can test your configuration by starting the development server:
yarn start
This should open a browser window to http://localhost:3000/, which should display the landing page.
Before deploying your app, you'll first need a .env.production.local
file. This follows the same format as .env.development.local
-- in fact, you can just copy the development settings across unless you're launching you own production app.
You'll also need to set the production config for your Firebase functions:
firebase functions:config:set stripe.product_id=... stripe.secret_key=... stripe.webhook_secret=...
The reason you'll need to do this is that the information in functions/.runtimeconfig.json
is only used locally; the firebase functions:config:set
command is used to configure the same settings for production.
Deploying your app to the internets is simple:
yarn deploy
This will build your app's distributable files and renderer package with universal-react-scripts
, then deploy these to Firebase Hosting/Functions -- along with the Firebase functions that constitute the API. Once complete, the app's URL will be printed to the console.
To keep the Firebase database up to date with the latest subscription data, you'll need to set up a Stripe webhook in the stripe Developers / Webhooks panel.
The webhook URL will take the following format:
https://us-central1-<your firebase project id>.cloudfunctions.net/webhooks-stripe
The webhook will in turn call the function in functions/webhooks/stripe.js
, which handles the following events:
invoice.created
customer.subscription.deleted
customer.subscription.updated
Vouch's source code, other than the files in /src/media
, are licensed under the MIT license.
Files under /src/media
are not licensed for use without explicit permission. Please get in touch at [email protected] if you'd like to use the Vouch brand in your project (or if you'd like to help us improve our license).