A little while ago, I read this article by Will Schenk, called "Slow Data, Fast Sites". I connected with it immediately as a premise for reimagining how we built dynamic websites. I definitely recommend a read of this article, if you have an interest in some of the technicalities of this concept.
There are some amazing and rapidly developing technologies that can enable you to do this, so we thought we'd give you a taster of how to create a single page web app, that can be built/compiled and run on cheap, configuration-less hosting and can be served with dynamic data.
"But I can't do on Forge what I can do on Heroku or Digital Ocean". I hear you say. Well, not with attitude, my friend. And besides, not everyone knows what to do with those products or should ever need to.
There's no server per-se to have to worry about, build on, scale or maintain, and largely, we think that's a good thing.
We are going to build a simple single page File Browser demo app, that will be hosted on Forge (cheap, easy to setup, super fast CDN'd static site hosting). The app will be built using React.js, using Hammerformac to organise and compile our sass and slim code.
We will use Anvilformac to serve the site locally, which you can download for free, and will enable us to easily get over Cross Origin request errors when loading in the browser, by giving us a .dev url (since we're not using a server with access localhost, you'll be using the file:// protocol which isn't supported) without having to do anything other than install it.
Please note, the tutorial is a simplified version of the demo site, which just contains a few more styles and slightly extended data structure, but you should be able to see easily enough how you can progress from this tutorial as a start point.
Let's get started...
Part 1: Setting up the Views and Components
This SlimSass Hammer template (we'll be writing our template with Slim, which Hammer now supports) or initialize new Hammer project.
Install (if you don't have them):
Install bower components into your folder
Setup Your Project Structure
Include your third party libraries using Hammer tags or manually, then add a container for your react app.
index.slim file will look like this:
Now we can create our React app.
It will contain 3 components:
- Document list
- Document box, that compose them
Our Preview is simple component, that may be described directly in Document Box
And our Document list, that handles click events on each element in the list
Now we can compose DocumentBrowser views by tabs in app.js
For now, in this demo, we'll just apply some basic styling, in
Now, we'll include the
document-browser components, with
NOTE: it's important to add
type="text/jsx"for your jsx templates, so include them without using the Hammer
Part 2: Let's add the backend with Parse
Setting up with Parse is dead easy, and there's plenty of resources out there to help you get started. But just by simply heading over to Parse, you should be able to follow their easy step by step Quickstart process. Here's what we need to do, that should just take a few minutes.
1. Sign up / Login to Parse
2. Create a New App
3. Create a new document Class (go to the Core tab, where you'll find the Parse data browser area).
4. Add some columns to your Document table, for example, you'll want:
- "name", type: string
- "category", type: string
- "preview", type: file
- "document", type: file
5. Add a few rows of data to your Parse table, so we have something to work with.
We'll want to now add the ParseReact mixin to our DocumentBox component
Now documents will be available via
this.data.documents in this component.
To get url of file just add
.url() in the end of field name.
Because the document preview won't load until we click on an item, let's set an initial state for this component.
HINT: you can install jsx-transformer. Run
npm install -g react-toolsin the terminal. Set your precompiler directory with
jsx js/app/ js/build/and change react components source paths in index.slim
Finally, we can publish our app. To very quickly share your app, you can simply hit the publish button in the Hammer app and it will upload your app to our staging / development hosting service at Hammr.co
If you want Production hosting, simply head over to Forge and create your site. If you're using Hammer, simply click the Export button in the hammer app to save your compiled site as a .zip file, which you simply drag and drop onto Forge, to deploy your new site for the world to enjoy.
Thanks to Boris Adimov, front-end developer here at Beach, who wrote this sample application.