Lyrix

Lyrix is a song collection app which helps you keep track of the songs you like to play or sing, along with your own notes, lyrics, or chords. It consists of a Node.js server and a React client:

• In development, the client is accessed via the web. It proxies external URLs to the server.
• In production, the server is accessed via the web. It routes clients to a static build of the React client.

Server technologies:

• The server is a REST API service written in Node.js.
• It's built and run with the Yarn package manager.
• It uses Express to structure its request-response system and for routing.
• Database access is via Ojection.js ORM on top of Knex.js query builder.
• Database implementation is PostgreSQL database
• For sessions, it uses Redis and connect-redis
• For authentication, it uses Passport.
• Colorful, namespaced error logging with debug
• Fetch song and artist information from Genius.com using genius-lyrics

Server testing:

• Good coverage of both system and unit testing with the Mocha test framework and the Chai assertion library
• Fixtures for Knex using simple-knex-fixtures

Client technologies:

• The client is a React app, using React Router for routing.
• It uses Bootstrap (both stand-alone and through React Bootstrap) and FontAwesome for graphical goodness.
• Graceful data subscription/fetching with SWR
• Drag & drop to re-order song-list items with react-beautiful-dnd

Features

• View a list of all artists, or an individual artist together with their songs
• View a song's lyrics
• Create your own songlists, to which you can add/remove any song
• Create your own song item for any song: chords, notes, or even your own lyrics
• Easily navigate from song to song within your songlists or per artist
• Import: search for songs to import into the database
• Full text search by song title, lyrics, or artist name.

Build

1. Install requirements by running yarn
2. Setup a PostgreSQL database for development.
3. $ touch .env
4. Provide the following environment variables inside .env:
   • DB_HOST
   • DB_NAME
   • DB_USERNAME
   • DB_PASSWORD
   • SESSION_SECRET - to be used for creating sessions with express-session
   • LOGGING - optional value to be used with the morgan logger, eg. common, dev
5. Optional: specify a port number for serving the React frontend, in client/.env:
   • PORT Default as per react-scripts start: 3000
6. Install Redis
   • If you have non-default Redis instance variables, add a Redis URL in .env as REDIS_URL=redis://...
7. Run knex migrations:

   $ heroku run knex migrate:latest

8. Run knex seeds, if any:

   $ heroku run knex seed:run

9. Run the app: yarn dev

Test

1. Setup a PostgreSQL database for testing.
2. Provide database connection parameters inside .env:
   • DB_TEST_NAME
   • DB_TEST_USERNAME
   • DB_TEST_PASSWORD
   • SESSION_SECRET - to be used for creating sessions with express-session
3. Run all tests: yarn test.
4. You can specify specific test types to run, eg. yarn test:unit for only unit tests, or yarn test:behav for only behavior/integration tests.

Deployment: Heroku

1. Ensure that the server port is read from process.env.PORT - Heroku will set this for your deplyed app.
2. In your database settings for production, create a single property for database URL, instead of single properties for user name, password, host, etc. In this app, the config URL is read from config:

     // In config/config.js:
     production: {
       connectionUrl: process.env.DB_URL,
       [...]
   
     // In knexfile.js:
     production: {
       client: 'postgresql',
       connection: config.connectionUrl,
       [...]

3. Install a PostgreSQL database on Heroku as follows:
   1. Install the PostgreSQL add-on:

      $ heroku addons:create heroku-postgresql:hobby-dev

      This will generate a database name, also retrievable by running heroku pg:info.
   2. Get the database URL (replace <database_name> with the name output by the previous step):

      $ heroku pg:credentials:url <database_name>

      The output will contain a few parts; select only the part that starts with postgres://
   3. Set the database URL for your app (replace the relevant placeholders):

      $ heroku config:set DB_URL='<database_url>' -a <app_name>

4. Provision Redis for your Heroku instance. There should be no further setup needed: the code will look for Heroku's Redis URL as process.env.REDIS_URL, and use it if found.
5. Push your source code to Heroku:

   $ git push heroku master

6. Run knex migrations:

   $ heroku run knex migrate:latest

7. Run knex seeds, if any:

   $ heroku run knex seed:run

---

References:

• How to Deploy an Express App on Heroku with Postgres and Knex
• Setting the port for node.js server on Heroku (StackOverflow)
• How To Make create-react-app work with a Node Back-end API
• Deploy React and Express to Heroku