Live Demo #
Click here to open demo fullscreen.
Overview #
After ten years and six different site releases, we at Evoke decided it was time to recognize the writing on the wall and close up shop. Thus, James Merrill and I (both long term members) set out to create a commemorative website to house the Evoke art collection indefinitely, rather than letting it just evaporate into the ether.
Development Process #
James started out by providing the scaffolding and basic layout for the website. I then took over, writing the database code, conversion code for the old database, developing the interview and memories pages, and adding various polishing tweaks (audio players etc). James and I then collaborated to finish it up and release it.
Tech Used #
- NodeJS / ExpressJS: Webserver, overall website, routing, etc.
- CouchDB: Storing mutable data for memories section.
- JSON: Storing static exhibition data (which will not change). Generated by PHP Scripts.
- HandlebarsJS: Templating. Using express-hbs npm package to render on server side.
- Gulp: Processing SCSS, resizing images, hot-reloading.
- SASS: Modular CSS3 Styling.
- PHP/MySQL: Conversion of legacy database and website.
- ReCAPTCHA: Ensuring memories section doesn’t get spammed.
- DigitalOcean: Hostping of NodeJS.
Overall Project Structure #
server.js is the main project file, which includes the express framework, the router, handlebars renderer, and body parser.
We declare a few simple routes in routes.js which receive web requests, fetch data from the correct model, and then render the data on the correct template. For a small site like this, it is fine to include all routes in one file like this.
Each section of the website (interviews, memories, art, etc) have their own models defined in the models directory. In addition, we have one special model declared for the CouchDB database. These models are all located in the models directory and either read data from a static JSON file or make asynchronous calls to the CouchDB database. When I have time, I will update these models to support loading different JSON files for different exhibitions.
The db.js model also allows the database to be initialized and cleared, though the server must be started with javascript developmentMode = true otherwise this has no effect (so it doesn’t get cleared when running). The memories.js model works with the database model to fetch data, and Google ReCAPTCHA to ensure that data is being posted legitimately.
The views folder contains all the various templates to display the website. These use the Handlebars templating system making it easy to iterate through art, exhibitions, and so on. Some googling led me to a helper for Handlebars (link for an example) allowing it to support boolean comparisons. Handlebars is based on a philosophy of separating the view layer completely from the business logic of an application. This created problems for outputting different thumbnails for music submissions than art pieces. In the end, I decided it would be more convenient to use a boolean to check the type of a piece than to change the thumbnail selection logic. It’s worth noting that although Handlebars has this design philosophy, other templating engines like Pug (formerly Jade) and EJS do not have this limitation. Personally, I prefer Pug now for this reason.
The assets folder contains images, scss files (separated by section), JSON data stores, and client side Javascript files. Lastly, the util folder contains service side Javascript helper files.
Running the Project #
Pop open your terminal and navigate to a directory you want to clone the project into.
Run git clone https://github.com/lostPixels/Evokeone.com && cd ./Evokeone.com && npm i.
If you just want to view the website, run node server. If you want the CouchDB database to function, first run CouchDB, make sure developmentMode = true in models/db.js, and run export DBUSER=[your database user name] and export DBPASS=[your database password] if your installation requires a password. If you then run node server and navigate to http://localhost:3000/db/init this will initialize the database.
Obviously, there is limited utility to running this on your own computer. However, I learned a lot from working on this project with James (who is a very experienced developer). The project in its current form is well organized and serves as a good example of a small Node + Express + Handlebars website.
Static Website / Exhibition Archive: #
In addition to building this website to house commemorative materials, I wanted to preserve the previous version of the Evoke Website (v5) in its entirety so people could see members lists, interviews, and past exhibitions. I used a web scraping tool to download the entire website from its current PHP-based CMS (the front end of which was developed mainly by me). The former website was developed using CakePHP / MySQL and hosted on Apache.
There were many errors in the scraped version, however, which I corrected manually by using Regex with Sublime Text. Although this work was a royal pain, I’m grateful because it forced me to become a Regex Ninja! :smiley:
As for the Exhibition Archive, it was generated through a combination of PHP scripts designed to pull information from the MySQL database and intelligently name art pieces so they could be downloaded. Then I zipped it up. Enjoy!