Install Elevate

From a Chrome based browser

Go to https://thomaschampagne.github.io/elevate/

You should be able to install it in all Chrome based browser such as Chrome, Chrome Canary, Chromium, Opera, Vivaldi, Yandex, and more ...

From continuous integration

Using latest develop branch builds: https://thomaschampagne.github.io/elevate/#/builds

Install steps with a standalone build: https://github.com/thomaschampagne/elevate/wiki/How-to-install-elevate-build-archive

From the sources

Go to chapter Environment setup.

Development

Project structure description

The project is split into 2 sub-projects: the core and the embedded app.

Core

The core contains the plugin's behaviour that acts directly on strava.com website. This includes extended stats on activities & segments efforts, best splits, google maps support, etc...

The core sources are located in plugin/core directory

Embedded app

The embedded app contains features like fitness trend, year progressions, ... and global plugin settings such as common settings, athlete settings & zones settings.

The embedded app sources are located in plugin/app directory

Notice: The plugin/common directory contains sources shared by both sub-projects.

Description of frameworks & tools used.

Core and embedded app have been developed using TypeScript language. TypeScript adds typing & class-based syntax over javascript then compiles back to JavaScript. Understand TypeScript in 5 minutes.

At a glance...

Core dependencies

• Webpack as packager and dynamic EcmaScript module loader.
• Q as promise library for JavaScript.
• Chart.js for JavaScript charting.

Embedded app dependencies

• Angular as frontend framework
• Angular Material for material designed components.
• Metrics Graphics and d3js for charting.

Shared dependencies

• Lodash to get a whole mess of useful functional programming helpers in typescript/javascript.
• MomentJS to parse, validate, manipulate, and display dates and times.

Tools

• NodeJS as javascript runtime environment.
• Npm as package manager to fetch project dependencies

Environment setup

Install requirements

Here's what you need to install to run the extension in a chrome based browser:

• Chrome based browser (Chrome, Chromium, Chrome Canary, Opera,...), of course...
• NodeJS here. Version 10.x is required.

That's all :)

Clone the project

Using HTTPS

git clone https://github.com/thomaschampagne/elevate.git

Or using SSH

git clone [email protected]:thomaschampagne/elevate.git

Fetch NPM dependencies

The npm command should be installed on your system through the NodeJS installation.

Enter in project directory

cd elevate

Then install NPM dependencies with

npm install

Build plugin

Once you have installed the NPM dependencies, you can build the plugin with the following command:

npm run build

Both core and embedded app will be built.

Once the build is completed, the plugin will be located in dist/ directory.

A production build can be also run with

npm run build:prod

This will disable TypeScript debug sources map and enable Ahead-of-Time compilation for embedded app.

Load plugin into your browser

Into your chrome based browser:

• Open new tab and type chrome://extensions, then enter.
• Tick Developer Mode checkbox.
• Click Load Unpacked Extension button, then choose dist/ directory (this is where you have the manifest.json file)
• Make sure to disable other instances of elevate. You can re-enable them back from same tab.
• Open strava.com

Build plugin on files changes

In order to avoid to re-run the painful npm run build task on each file changes. You could run the following command:

npm start

This task will watch for files changes and automatically rebuild plugin to dist/ directory. It's a way more suitable and faster for a development workflow.

Run unit tests

The below command will run core and embedded app unit tests into a headless chrome.

npm test

Should be run and has to pass before any work submission.

Packaging

You can package the extension with the following command

npm run package

A production build will be executed for this task.

On packaging done, a release archive will be generated in package/ directory.

Package with Docker

Create docker image from Dockerfile

docker build . -t elevate-chrome-builder

Run a docker production build through a container. Replace /path/to/your/directory/ with a folder on your host to fetch the packaged build when done.

docker run --rm --name elevate-chrome-build -v /path/to/your/directory/:/package elevate-chrome-builder

Clean project

Simply run

npm run clean

This will clean dist/, package/ & *.js *.map generated files

Git-Flow Repository structure

The project repository is fitted for GitFlow branches management workflow.

Learn more @ http://nvie.com/posts/a-successful-git-branching-model/