Skip to content
A Raid Finder For Grand Blue Fantasy
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit 3f4420c Jan 2, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
static Added new GO raid Jan 2, 2020
.gitignore Updated Packages Nov 11, 2019 Create Jul 5, 2017
LICENSE Update year Feb 23, 2018
Procfile Init Commit Jun 19, 2017 Merge branch 'master' of Mar 1, 2018
app.json Changed Grand Blue to Granblue Feb 28, 2018
index.js Added cluster restart Nov 16, 2019
package-lock.json Changed server to use http2 Nov 12, 2019
package.json Changed server to use http2 Nov 12, 2019
raids.json Added new GO raid Jan 2, 2020
semantic.json Added dimmer to semantic.json Dec 8, 2019


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.
You can’t perform that action at this time.