By following the steps below you can get started with a service that has all the pieces you need (frontend and backend) to access data from and update Strava activities throught the public Strava API.
- Sign in to strava.com -> Settings -> My API Application (https://www.strava.com/settings/api)
- Set up your app and retrieve your "Client ID" and "Client Secret"
- Create an .env file at the top level of your directory with the following values
STRAVA_CLIENT_ID=REPLACE_WITH_STRAVA_CLIENT_ID
STRAVA_CLIENT_SECRET=REPLACE_WITH_STRAVA_CLIENT_SECRET
STRAVA_SUBSCRIBE_TOKEN=REPLACE_WITH_STRAVA_SUBSCRIBE_TOKEN_CAN_BE_ANYTHING
MONGO_URL=REPLACE_WITH_MONGO_URI
PORT=3010
- Setup a free mongodb instance https://www.mongodb.com/cloud/atlas/register or implement your own database and follow the steps there to get your MONGO_URL for the .env (I used a free instance for dev/local and an instance attached to my railway deployment for prod)
- Run
npm i - Run
npm build - Run
npm startto run your app locally to make sure everything works as intended - Replace all instances of "YOUR_APP" with your app specific details
- Push to a remote git repo so you can deploy somewhere
- Deploy service (recommendation below)
- Integrate your Strava account with your app through your front end. To do this, navigate to your deployed site and go through the auth process with your own account.
- Initiate your webhook to start receiving activities. To do this, make a POST request to
https://www.strava.com/api/v3/push_subscriptions?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&callback_url=YOUR_DEPLOYED_APP_URL/stravahook&verify_token=STRAVA_SUBSCRIBE_TOKEN
(make sure to match your subscribe token to the one in your.envfile)
I recommend using railway which is reasonably priced and has an amazing interface. It makes it easy to deploy your service, set up a public endpoint and deploy a mongodb server with a few clicks. Once you have a deployed the service make sure to set your environment variables to the deployed app endpoint.
This repo is set up as a monolith (backend and frontend in one repo) for simplicity.
The server folder holds the backend code and is written in typescript.
The src folder holds the frontend react app
The compiled code for the server is outputted to dist and the React App code is outputted to build.
The monolith works by listening for requests to the endpoints we setup e.g. /auth and /users and if it DOES NOT match any endpoints it responds with the React App itself.
This project uses Typescript to help define what you can access from Strava activities and Webhook requests. Because of this and the fact the project is a monolith, it adds some complexity to the scripts in package.json
"scripts": {
"start": "node dist/index.js", // Start the project. ***Make sure to run the build command first***
"build": "react-scripts build && tsc", // Builds React App and compiles TS server code to JS to dist and build folder respectively
"test": "jest",
"build:server": "tsc", // compiles TS server code to JS to build folder
"dev:server": "ts-node-dev --respawn --transpile-only server/index.ts", // Auto reload to changes for server code
"start:client": "react-scripts start", // Start React App
"test:client": "react-scripts test",
"dev:client": "react-scripts start",
"build:client": "react-scripts build" // Build React App and output to dist folder
},