Total results: 6

Building a PDF Library with Gatsby.js

Like most developers I have large libraries of PDF books lying around in a folder somewhere. In order to organise the books and get a better overview I decided to work on a weekend project designed to investigate Gatsby.js, a React / GraphQL based static site generator. The project was to use Gatsby to build a PDF library that would allow me to put my PDF books into the project and then build a simple static website that would list the PDFs, give some information about each book, allow me to read them online, and finally download them if I wanted.

Demo

My static Gatsby based PDF library ended up with the following features:

  • List view of PDF books, read from the file system
  • Metadata extraction from the PDF book (Author, Page count, etc.)
  • Read a book online
  • "Fullscreen" reading mode
  • Download a book
  • Remember your page number, for future reading
  • Search for books

You can see a demo of the Library here: https://blakesimpson.github.io/gatsby-library/

What is Gatsby?

Gatsby

As mentioned in the introduction, Gatsby.js is a static site generator built with JavaScript. Gatsby uses React for building the views and a GraphQL API that is queried from your views to read information about your static files.

This means you can add, for example, a bunch of Markdown files to your project and Gatsby will run through each file (what it calls a "node") to index these and put them into the GraphQL index. You can then build a list of your Markdown articles to the home page and link to each one and render it as a web page.

With this setup, Gatsby is very good for building static websites that do not rely on a database at runtime, for example, a blog.

However, Gatsby can not only read Markdown files from your system, it can read any file type such as an Excel spreadsheet, or as I discovered, a PDF.

Before going on to show how I extracted PDF information and put it into the Gatsby index you might want to try out some Gatsby starter examples such as the gatsby-blog.

Also, if you have never worked with Gatsby before, it is a good idea to work through the tutorial which helps to understand the Gatsby concepts such as configuration, the node server, and how the plugins work.

Writing a local IP proxy with node.js

I recently had the issue where I needed to proxy traffic from my IP address to a different server, in order to perform mobile testing. The setup I have is a "local" server running on my development machine with a local hostname, since my phone can not access this hostname, I decided to use a proxy that allows me to visit the IP address of my development machine on my phone and all traffic would forward to the local domain.

I decided to use Express.JS as it is an easy to use server. Express also has large amount of community contributed middlewares, such as express-http-proxy which fills all of my requirements.

Additionally I use the package "ip" that will discover the local IP address of my development machine.

These dependencies can be installed with:

yarn add express express-http-proxy ip

The proxy server is quite small, and looks as follows:

Serving static files with Server.js

Update 14/03/2018:

Thanks to a pull request to my example repository by Francisco Presencia, the creator of Server.js, he explains that my original example can actually be cut down to a single line of code.

Server.js already contains the static middleware from Express so there is no need to include and configure the server manually. Server.js assumes that you want to serve static files from a directory called public/ in your project, in which case you can simply create the server as:

require('server')();

If you would like to serve the static files from a different directory, such as the root directory, as in my case you can simply pass a public configuration option when initializing the server. For example:

require('server')({ public: '.' });

This highlights how Server.js is even simpler to use than I assumed.


Server.js is a node based server that is based on Express.js but provides you with an even easier interface to write your server with.

As server.js was only recently released, I was trying to find a tutorial on how to serve a directory of static files but could not find one. After reading the documentation, I noticed that since Server.js is built on express, you can use express middlewares out of the box. Since Express already has a express.static() method, I noitced that I could use this to serve static files as I wanted.

The example server is very basic, it simply serves all files in the current directory.

First of all, I import server and express:

const server = require('server');
const express = require('express');

Next I import the modern method from server.utils that allows us to attach Express middleware to our server:

const { modern } = server.utils;

I then call the express.static middleware, and pass it to modern:

const middleware = modern(express.static('./'));

Finally, I start the server and pass the static middleware:

server(middleware);

The final server is only 7 lines long:

const server = require('server');
const express = require('express');
const { modern } = server.utils;

const middleware = modern(express.static('./'));

server(middleware);

You can test this by writing this to a file called server.js and calling it with node server.js. The server will then be running at: http://localhost:3000/.

If you then write an index.html file in the same directory, it will be served when visiting this address in your browser.

For full example code, please visit this repo: https://github.com/BlakeSimpson/serverjs-static-files

Ember Server "Bus Error 10" Fix

If you are using the ember-cli package to access the ember command line tool and experience a "Bus Error 10" that crashes the ember server every time you save a file then it is probably due to an incompatible Node.js version.

To fix this issue simply head to the Node.js downloads page and get the latest version of Node for your operating system.

For a functional ember server you should be using Node.js version 0.10.21 or higher, personally I upgraded from 0.10.20 to 0.10.29 and now the server runs perfectly, including the live reload functionality.

Static file web servers

Testing a static website can be done simply by opening the HTML files in a web browser, but for some functionality to perform correctly, such as local AJAX calls, the files need to be served from a web server.

Alternatively, you may want to check out some static files on your mobile device. You can do this easily by starting a simple web server for the project and navigate to your computers IP address with the given server port.

Python Server

The easiest way to do this on UNIX based systems is to use the Python Simple HTTP Server, like so:

python -m SimpleHTTPServer 8080

Run this command in the same directory as your project from the terminal, then point your browser to http://localhost:8080.

This is a great way to get a server running in seconds, for basic testing, but I have found that as the number of files in the project increases, the stability of the server decreases. Often files will not be passed to the client and 404 errors are encountered. For these reasons I have investigated a stronger solution that is still simple to setup. This leads me to Node.JS.

Node Server

Node.JS is no stranger to web servers, in fact this is often the primary task of a Node application.

"Connect" is a Node.JS middleware application that makes the creation of simple web servers trivial.

To get Connect running, first install it via npm:

npm install -g connect

Here is a web server that can be used, simply paste the code into a file called "server.js" in your project's root directory.

var connect = require( 'connect' ),
  http = require( 'http' );

app = connect()
  .use( connect.logger( 'dev' ) )
  .use( connect.static( __dirname ) );

http.createServer( app ).listen( 8080 );

Finally run the server from the terminal like so:

node server.js

If no error was received, the server is running and files can be viewed by browsing http://localhost:8080, just like in the Python example.

I have not had any trouble with the Connect version of my server and it comes built with a nice development logger, showing what files were requested and with what status. This output can be viewed live in the terminal window as requests come in.

Connect Server Dev Log

Install Node.JS on Debian Wheezy

Official Method

The official Node.JS install guide recommends manually downloading and building the Node.JS package for Debian. This can be done using the following set of commands:

sudo apt-get install python g++ make checkinstall
mkdir ~/node_js_src && cd $_
wget -N http://nodejs.org/dist/node-latest.tar.gz
tar xzvf node-latest.tar.gz && cd node-v*
./configure
checkinstall
sudo dpkg -i node_*

This install method should work fine but will take a long time to complete on the Raspberry Pi's hardware. For this reason I experimented a little and found a quicker install method that doesn't require a manual compile, by using the Ubuntu package.

Ubuntu Method

This install method will be much faster than the official method but is not designed for Debian Wheezy, so use at your own risk! Personally I have not had any trouble with my node install yet but I cannot guarantee this will be the case for anyone else.

sudo apt-get update
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js

At this point the file with the new repository details must be edited. Open the file: /etc/apt/sources.list.d/chris-lea-node_js-wheezy.list with a text editor like vim and change the word "wheezy" to "lucid". Thanks to Ken Yap for this hint.

Now, go on and finish installing Node.

sudo apt-get update
sudo apt-get install -y nodejs

© Blake Simpson, 2012 – 2018