Skip to content

Commit

Permalink
edited readme
Browse files Browse the repository at this point in the history
  • Loading branch information
biohackerellie committed May 1, 2023
1 parent 2f3e469 commit 14c6eda
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 19 deletions.
11 changes: 0 additions & 11 deletions Custom-Template/.env

This file was deleted.

84 changes: 84 additions & 0 deletions Custom-Template/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
Basic Installation Instructions:

1. Clone this folder: You can download just this folder from the repo by going to [https://download-directory.github.io/](https://download-directory.github.io/) and pasting in the url of this directory: https://github.com/biohackerellie/music-app/tree/main/Custom-Template

2. Create an .env File: At the root of the repository, create a new .env file. This file will store all of your environment variables. Use the provided .env.example file as a guide.

3. Place all of your music files in the /server/public/audio directory, and your album covers in the images directory. Alternatively, you can have these folders elsewhere like on a shared directory and link them with the docker compose file, check step 5 for details.

4. Create a songs.json File: In the server/ directory, create a new songs.json file. This file will contain the metadata for all of your songs. For the coded mapping to work correctly, each song must have all of the following fields

```json
[
{
"id": 1,
"title": "title",
"artist": "Ellie Kerns",
"album": "album name",
"image": "images/albumArt1.jpg",
"audioFile": "audio/audioFile1.mp3",
"releaseDate": "releaseDate"
}, // comma after each object in the array
{
"id": 2,
"title": "title",
"artist": "Ellie Kerns",
"album": "Single",
"image": "images/albumArt2.jpg",
"audioFile": "audio/audioFile2.mp3",
"releaseDate": "releaseDate"
} // no comma after the last object in the array
]

// if you copied and pasted the above code, you'll need to delete the comments (//) or it will break your code

```


5. Build and Run with Docker Compose: Edit the docker-compose.yml file if necessary, be sure to delete the comments (#) on the `volumes` section if you are mapping your music and images files outside of the containers. Run `docker-compose up --build` from the root of the repository. This will build your Docker images and start your containers. If everything is set up correctly, you should be able to access your app at localhost:3030 (or whatever port you specified in your .env file).
```yaml
version: '3.9'

services:
frontend:
build:
context: ./front-end
dockerfile: Dockerfile
image: epklabs/music-app-frontend
container_name: music-app-frontend
restart: unless-stopped
ports:
- '3030:80' # change to your desired port on the left side of the colon. Do not touch the right side, and make sure to update the port in your .env file
depends_on:
- server
networks:
- mynetwork
environment:
- VITE_API_URL
- VITE_HOME_TITLE
- VITE_SPOTIFY_LINK
- VITE_APPLE_LINK
- VITE_AMAZON_LINK
- VITE_YOUTUBE_LINK
- VITE_SOUNDCLOUD_LINK

server:
build:
context: ./server
dockerfile: Dockerfile
image: epklabs/music-app-server
container_name: music-app-server
restart: unless-stopped
ports:
- '3001:3001' # change to your desired port on the left side of the colon. Do not touch the right side and make sure to update the port in your .env file
#volumes:
#- /path/to/images:/app/public # change to your desired path, if not using the default, on the left side of the colon. It must be in a folder called Images. Do not touch the right side
#- /path/to/music:/app/public # change to your desired path, if not using the default, on the left side of the colon. It must be in a folder called Music. Do not touch the right side
networks:
- mynetwork
environment:
- SITE_URL

networks:
mynetwork:
```
25 changes: 17 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

## Backend made with Express and SQLite.

# React Music App in Docker 1.0 Release Notes
# React Music App in Docker 1.5 Release Notes

I'm excited to announce the first official release of React Music App in Docker. This version includes a wide range of features designed to provide an immersive and easy-to-use music streaming experience. Here's what you can expect:

Expand All @@ -24,15 +24,24 @@ Whether you're on a desktop or mobile device, my music player is designed to pro
## Docker Integration
With Docker setup for both the front-end and the back-end, we ensure a consistent environment, making the app easy to launch and maintain, regardless of your operating system.

## Enhanced Error Handling
Improved error handling to provide a better user experience. Loading indicators keep you informed while your music loads, and error messages guide you when something goes wrong.

## Performance Optimization
I've worked hard to iron out bugs and optimize performance. This version of the app provides faster load times and smoother overall operation, ensuring an uninterrupted music listening experience.
## Version 1.5 - Dockerize and Customize Your Music App
### New Features:

## Coming Soon: Artist Template (v1.5)
Though everyone is free to fork the repo now and start customizing, I'm working on an update that will include a template version of the app, designed for artists to easily replace the default music with their own and customize the styling. Stay tuned for version 1.5!
- Docker Support: I've added Docker files to both the front-end and server directories to enable easier deployment of the application. This includes a Docker Compose file at the root of the repository, which allows the containers to be spun up together with a single command.

- Customization with Environment Variables: I've introduced the ability to customize various aspects of the application through environment variables. This includes the homepage title and various music streaming links (e.g., Spotify, Apple Music), as well as API URLs. This allows you to personalize the application without modifying the code.

- Single .env File: The front-end and server now pull from a single .env file at the root of the repository. This consolidates all environment variables into one place, simplifying configuration.

- Improved Documentation: I've updated the README with instructions on how to use the new Docker and environment variable features, making it easier for new users to get started with the app.

Go to the Custom-Template Folder to get started!

Bug Fixes:

- Various minor bug fixes and performance improvements.

Thanks for checking this out! I'm excited to bring you this version and look forward to your feedback.

*Current license restrictions due to app containing my personal copywritten music. Upon Completion, template will be licensed under MIT.*
*Live version of the app has stricter License due to copyright music, Template licensed under MIT*

0 comments on commit 14c6eda

Please sign in to comment.