Skip to content

Commit

Permalink
UPDATE: Readme file with instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
jonashcroft committed Jul 13, 2020
1 parent 7cca9f9 commit 08d3ce9
Showing 1 changed file with 39 additions and 10 deletions.
49 changes: 39 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,48 @@
# Nowify
A simple app to display visuals of your current Spotify track. Designed to be used on a Raspberry Pi.

Demo:
[https://jonashcroft.co.uk/nowify](https://jonashcroft.co.uk/nowify)

[https://jonashcroft.co.uk/2018/05/14/now-playing-screen-spotify-raspberry-pi-es6/](https://jonashcroft.co.uk/2018/05/14/now-playing-screen-spotify-raspberry-pi-es6/)
Write up:
[https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/](https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/)

## How to set up
>>> 🚨 **Note**: Nowify was created over 2 years ago as a learning exercise and the code and build process can be greatly improved. I'm considering rewriting a modern version in a new repository.
1. Ensure that [Gulp](https://gulpjs.com/) is installed
2. Log in to [Spotify Dashboard](https://developer.spotify.com/dashboard/applications) and create a new client
3. Enter your **Client ID** and **Client Secret** in `src/js/_config.js`
4. In terminal, navigate to your cloned directory and install the npm packages: `npm install babel-core babel-preset-env babel-register babelify browser-sync browserify browsersync eslint gulp gulp-autoprefixer gulp-babel gulp-concat gulp-cssnano gulp-notify gulp-plumber gulp-rename gulp-sass gulp-sourcemaps gulp-uglify vinyl-buffer vinyl-source-stream node-vibrant --save-dev`
5. Once installed, enter `gulp` to run Gulp
6. You'll need to save a SCSS and JS file in the `/src/` folder to initially compile the code and create a `/dist/` folder.
## How to use

## Notes
To get this up and running, you'll need to run the build tools to generate the compiled code. You'll then place that compiled code wherever you want to run Nowify (local webserver, Raspberry Pi etc.) - so this will require you to have some tools installed to your desktop. The following was written for using a Mac.

I originally built this for personal use and decided to share the source code, so things could very well be broken and/or be done better.
----

1. Install Node.

Given that this project is 2 years old, the versions of each package are quite old, so I'd recommend installing Node via NVM (Node Version Manager) and using v11 for Nowify. Installing Node will also install NPM (Node Package Manager).

Instructions: https://tecadmin.net/install-nodejs-with-nvm/

2. Ensure that [Gulp](https://gulpjs.com/) is installed.

Gulp is a task-runner that will assist in compiling our code.

3. Clone this repo, navigate to the Nowify folder and ensure that nvm is using Node 11 by running `nvm version`

4. When in the Nowify folder in your terminal, install the required packages:

`npm install babel-core babel-preset-env babel-register babelify browser-sync browserify browsersync eslint gulp gulp-autoprefixer gulp-babel gulp-concat gulp-cssnano gulp-notify gulp-plumber gulp-rename gulp-sass gulp-sourcemaps gulp-uglify vinyl-buffer vinyl-source-stream node-vibrant --save-dev`

5. Now that the requiremens are added, you'll need Spotify API keys. Generate them by logging in to the [Spotify Dashboard](https://developer.spotify.com/dashboard/applications) and creating a new client.

6. Enter your **Client ID** and **Client Secret** in `src/js/_config.js`

7. Once that's added, start the build tools by executing `gulp` in the terminal.

When the browser window opens, you might see an unstyled page. Simply open any Javascript and CSS file and force a re-save to allow gulp to execute and compile the code. This will compile the CSS and JS into the `dist` folder.

8. Play some music on Spotify

You'll see that Nowify will update with your tracks.

9. Move your compiled code

Your compiled version of Nowify will consist of the `/dist/` folder and `index.html` in the root. Move these two to wherever you want to run Nowify from.

0 comments on commit 08d3ce9

Please sign in to comment.