In this article we're going to look at how you can construct a photo gallery using DADI Web Services, specifically Web, API and CDN.
Written By
Adam K Dean
• 1 min read
Share This
In this article we're going to look at how you can construct a photo gallery using DADI Web Services, specifically Web, API, and CDN. First we'll create each of the DADI services using the command line interface tool. After that we'll grab some sample images, store them in the CDN, add them to our database via API, and then create a frontend in Web.
For this project I'm going to be working in a single directory called "gallery" with a subdirectory for each of the services, which the DADI CLI tool will create for us.
If you haven't installed the CLI, let's do that first:
$ npm install @dadi/cli -g
Now we'll create the "gallery" directory which will contain each of the services:
$ mkdir ~/projects/gallery$ cd ~/projects/gallery
CDN
Let's start with the CDN.
First, we'll create a new CDN service using the DADI CLI command dadi cdn new <name>:
Subscribe to our newsletter
Get the best and latest news and feature releases delivered directly in your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tutorials
Last Updated:
September 2019
$ dadi cdn new cdn
This will download and install DADI CDN, then take you through an interactive wizard. We're just going to run a simple HTTP, file-based CDN service:
Let's start by configuring the web server that DADI CDN will run on. (0% complete)? What is the name of this CDN instance? DADI (CDN)? What protocol should this CDN instance run on? HTTP (insecure)? What is the IP address the application should run on? 0.0.0.0? What is the port number the application should run on? 8002Time to configure the sources that CDN will use to retrieve images. (18% complete)? Would you like to load images from the local filesystem? Yes? What is the path to the images directory? ./images? Would you like to load images from Amazon S3? No? Would you like to load images from a remote URL? NoGreat! Let's now define how CDN handles other assets (e.g. CSS, JS or fonts) (44% complete)? Would you like to load assets from the local filesystem? No? Would you like to load assets from Amazon S3? No? Would you like to load assets from a remote URL? NoLet's now look at caching, which is crucial to ensure that CDN delivers images and assets in a performant way. (67% complete)? What is the time-to-live (TTL), in seconds, of cached items? 3600? Would you like to cache items on the local filesystem? Yes? What is the path to the cache directory? ./cache/? Would you like to cache items on a Redis server? NoSuper. You also need to configure the credentials for authenticated consumers to use via oAuth. (85% complete)? What ID should authenticated clients use? photogalleryUser? What secret should authenticated clients use? s3cr3tsqu1rr3l? What is the time-to-live (TTL), in seconds, for oAuth tokens? 1800Almost there! A couple more questions about your CDN installation. (92% complete)? Would you like DADI CDN to run in cluster mode, starting a worker for each CPU core? No? Which environment does this config apply to? DevelopmentAll done!
Great, now let's prepare our images. Create a directory within the cdn directory and call it images. Next we'll grab some sample images for our gallery. One great place to get these is Fujifilm which provides sample images from camera models. Download the following images into the images directory: sample-1.jpg, sample-2.jpg, sample-3.jpg, sample-4.jpg, sample-5.jpg.
From the cdn directory, run npm start, then check the images are working by navigating to http://localhost:8002/sample-1.jpg.
We're now ready to move onto API.
API
Leave the CDN directory, going back up a level to the "gallery" directory. We're going to create a new API service using the DADI CLI command dadi api new <name>:
$ cd ..$ dadi api new api
At the time of writing, this will install DADI API 2.x so there will be no interactive wizard. Soon though, with DADI API 3.0, you'll be walked through a setup wizard and will be able to select from a number of data connectors.
Note: API 2.x requires a MongoDB instance to work. If you don't have one of those setup already, you can easily start one with Docker to test with:
$ docker run -d -p 27017:27017 mongo:3.2
The first thing we'll do is edit the configuration file, config/config.development.json, and modify the server settings.
Change the port under server and publicUrl to 8001. Let's also change the database value from dadi-api to photo-gallery under the database and auth sections. Here is a quick summary of changes:
As we saw in my recent post on Authentication in DADI API, we need to create some credentials for our Web service to authenticate with our API service. We can use the DADI CLI to do that, it's really easy. Change into the new api directory and run the following:
$ dadi api clients:add? What is the client ID? photogallery? What is the secret? s3cr3tsqu1rr3l? What type of access does the user require? user✔ Created client with ID photogallery and type user
Next we're going to create some collections in API.
In the api/workspace/collections/1.0/ directory, delete the sample library directory and create a new directory called gallery, and inside that, create a file called collection.albums.json with the following contents:
Great. We now have two collections, albums with the title and publicationDate fields, and photos with the album, title, description, filename, and publicationDate fields. Now it's time to create some entries. From the api directory, run npm start.
Populating the database
For brevity, we're just going to use cURL to perform API calls. Using cURL, let's first grab ourselves an authentication token:
Let's extract the album IDs from the results. We'll need them for adding photos to each album: 5a20264f94c0a42e53d0823f for Travel, 5a20264f94c0a42e53d08240 for Music, and 5a20264f94c0a42e53d08241 for Autumn leaves.
Now let's create some photos. We'll add sample-1.jpg and sample-2.jpg to the first album, sample-3.jpg and sample-4.jpg to the second album, and sample-5.jpg to the final album.
Don't forget to change the access token used in the Authorization header in the following cURL command, AND the album ID values!
Okay, so now we have three albums and five photos. We are now ready to move over to our Web service and create our gallery frontend.
Web
Leave the API directory, going back up a level to the "gallery" directory. We're gojng to create a new Web service using the DADI CLI command dadi web new <name>:
$ cd ..$ dadi web new web
You'll be asked which template engine to use, we're just going to go with Dust.js using the module @dadi/web-dustjs, as it's easy.
The first thing we will do is update our config/config.development.json file. Open that, and set the contents to:
In the global section you can see we have a single variable, which is the URL of our CDN instance. In the server you can see we're listening on port 8000. If you recall, the API is listening on port 8001, and the CDN on port 8002. We then configure the location of the API instance, and provide some authentication credentials (which we setup earlier.)
Preparing our datasources
Next we're going to prepare our datasources. These files will tell Web how to fetch data from our API service. Create a file within the workspace/datasources directory called albums.json with the following:
These datasources are used by our pages to fetch data from the API. In particular, the source field provides the location of the data provider, and the requestParams field will be used later on to filter the data with specific IDs (for when we're loading individual photos, etc.)
Preparing our web pages
Now we'll work on the web pages. The DADI CLI will have autogenerated some files for us within the workspace/pages directory. Let's quickly simplify & tidy those up.
Replace workspace/pages/partials/header.dust with this:
Replace workspace/pages/partials/footer.dust with this:
</body></html>
Delete these files, as we're not going to be using them:
workspace/pages/partials/pagination.dust
workspace/pages/partials/post.dust
workspace/pages/post.dust
workspace/pages/post.json
Create the gallery pages
Now we're ready to start configuring our index page to fetch our photo gallery data. Open up the workspace/pages/index.json file and replace with this:
Here we're defining the page path as / and hooking up our two datasources: albums and photos. Next, open up workspace/pages/index.dust and insert the following:
Here we're looping over all the albums, and then we're checking for photos which belong to that album, and then displaying some information including a small photo. We're utilizing DADI CDN's image resizing here.
Next, create a file called workspace/pages/photo.json file with the following:
Here we're specifying that the path takes a parameter named photoId, and that this should be passed to the photos datasource, which will filter our results as we touched on earlier.
Next create a file called workspace/pages/photo.dust file and insert the following:
This doesn't look much different from the index page, except we'll be filtering the albums we return via the requestParams. We could (and certainly would) use partials to reduce repetitive code, but to keep things simple we'll skip that here.
Finally, in the workspace/public directory, edit style.css and replace the contents with this:
Now you're ready to run the Web service. Ensure the API and CDN services are both running first, then from the web directory, run npm start and navigate to http://localhost:8000. You should be greeted by the index page:
If you click into an album, you should be greeted by the album page:
If you click into a photo, you should be greeted by the photo page:
There is more we could do, such as add pagination, add a better user interface, maybe hookup DADI Publish for administration, but here we have the basic flow of image storage and manipulation with CDN, data storage and access with API, as well as effortless presentation with Web.
