From Jesse's Wiki
Jump to navigation Jump to search

Fider is an open source web tool to allow users to log in easily with OAuth support and post requests that can be upvoted by other users.

Setting up

  • Download Docker image
  • Following the directions here did not work for synology NAS
    • use info in yml file to manually configure docker image using the synology docker UI
    • download Postgres image
    • configure all environment variables from the yml file
    • db port does not need to be exposed because docker lets images talk to themselves
    • link to local port to container port and use synology reverse proxy
    • use google SMTP server login details. other mail options didn't work
    • follow the directions on Fider's website to configure OAuth for Google and Facebook
  • Set up oAuth for Azure Active Directory [1]
  • and navigate to Azure Active Directory -> App Registrations
  • copy Application (client) ID
  • go to Certificates & secrets, New client secret, set to never expire
    • Authorize URL or end point:{yourTenantId}/oauth2/v2.0/authorize
    • Token URL:{yourTenantId}/oauth2/v2.0/token
    • Profile API URL:
  • In Azure, add the callback URL generated by Fider by adding the Web platform configuration

Setting up a second instance

  • Duplicate the settings of the postgres container in the Docker UI
  • Make a new folder and link the fider database to it
  • Do the same for the fider container
  • Change the port for Fider
  • Link the container to the new db, but change the name (e.g. db-2) and make sure the environment variable DATABASE_URL matches the new name.
  • Launch the database container, check log to make sure it's ready to accept connections
  • Launch Fider container
  • If both are successful, register reverse proxy
  • Register subdomain in DNS provider (e.g. Google Domains)
  • Add subdomain to certs for Let's Encrypt (make sure connection can be made)

Customizing Styles

Edit the CSS under Advanced

Remove the purple colour with this CSS code:

All instances of #3b4ade were replaced with #007bff

.c-vote-counter button.m-voted,.c-vote-counter{color:#007bff}.c-vote-counter button.m-voted .icon,.c-vote-counter .icon{color:#007bff}

.c-avatar.m-staff{border:1px solid #007bff}


.c-post-list .c-list-item .c-list-item-title:hover{color:#007bff}


.c-side-menu .c-side-menu-item.m-active {
    color: #007bff;
    border-left: 2px solid #007bff;
    font-weight: 600;
    background-color: #fff;

.c-side-menu .c-side-menu-item.m-active:hover{color:#007bff}