Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Site Logo

A Raid Finder For The Game Granblue Fantasy

Hosted at

A special thanks to u/Bloodhram for creating the icons for the site and extension!

Example of Website


Please remember to change/remove the Google Analytics code at the bottom of index.html if you are cloning this repository!

Installing Dependencies

After cloning or downloading the source code, make sure that you have Node.js and NPM installed and setup in your PATH. All the other dependencies will be installed when the command npm install is run in the root directory of the site. Semantic UI is set to automatically install itself during this process. The next step would be to setup the environment variables as shown in the next section. The site's server can then be started with node index.js or npm start.

Setting Up The Environment Variables

One of the main environment variables is sslEnabled. Set it to false if you do not have an SSL certificate for the site and set it to true if you do. Create a new folder in the root directory of the site called sslcert and place your keys in there.

Setting up the other environment variables is necessary for using the Twitter API.

Twitter App Page

  1. Go to the Twitter app page and create a new app. The application details don't matter too much.

Twitter App Details Page

  1. Make sure you app has read and write permissions in the permissions tab.

Twitter App Key Create Page Twitter App Access Create Page

  1. The Keys and Access Tokens tab already contains two of the four keys you need: the Consumer Key and the Consumer Secret. To create the other two, click on the "Create my access token" button. Now, the page will refresh and the other two keys will appear: the Access Token and the Access Token Secret.
  2. These 4 keys will need to be setup in your environment. See below on how to do so in Heroku.

Using The Environment Variables in Heroku

Heroku Show Configs Page

  1. Go to your app's settings page. There will be a "Reveal Config Vars" button.
  2. Enter all 5 keys and their corresponding values: consumer_key, consumer_secret, access_token_key, access_token_secret, sslEnabled.
  3. Restart your dynos.
  4. App should work now!

Adding New Raids

Raid Structure

  1. Add the raid to the raids.json file in the root of the project.

Raid Image Folder

  1. Add the raid cover image to the static/assets/raids folder. You can get this image from the GBF wiki.

Adding New Sound Notifications

Sounds Folder

  1. Add the sound file to the static/assets/sounds folder.

Sounds Loading

  1. Load the sound file in the top of main.js.

Sounds Playing

  1. Add playing the sound file in the PlaySoundNotif function in main.js.

Sound Option In HTML

  1. Add the option in the sound choice control in index.html.

Sound Option In JS

  1. Add the option in the CreateSettingsModalFrame function in settings.js.