Rebuild Clipboard.ninja in React

Clipboard.ninja

About 3 years ago I created Clipboard.ninja. It was a technology-driven pet project; I wanted to learn more about NodeJS and needed a project to work on that.
Since then it has been running and there are still users who use this application on a regular basis.

A few weeks ago I again needed a project to learn more about a technology, this time it was React.
I decided to rebuild Clipboard.ninja because it seemed like a good fit for React. It also has an Android app which could be a nice experiment to rebuild in React Native.

Create-react-app

I started the project with create-react-app.
Although I’m more a guy who wants to setup & configure everything myself so I really understand what’s happening, this really helped speeding up the development and focus on building the app instead of tinkering with the build configuration.
After my first steps into development I ‘ejected’ from create-react-app to have all the needed scripts and configuration visible in my project and remove the ‘magic’.

Create-react-app provides a great User Guide which describes best practices within React and helps going forward.

Upgrading from 0.9 to 1.0

When I started the project it was with create-react-app 0.9 which didn’t had Webpack2, Progressive Web Apps, and all the other new and shiny stuff that came with 1.0. As this is a technology-driven, I needed to upgrade to 1.0 as soon as it came out (okay maybe even before 1.0 was released).
Because I already ejected from create-react-app I couldn’t just bump the version of react-scripts. I created a new project with the newest version of create-react-app, ran the eject script and then by hand copied everything related to create-react-app to my project.

Deploying

The application exists of two parts; the frontend and the backend. The frontend is the React app which communicates with the backend thru websockets.
The backend is a NodeJS server, based on the previous version of Clipboard.ninja to handle the websockets.
Thanks to Webpack, everything the frontend needs is bundled and static, you don’t need a NodeJS server, only something to host the static files.
AWS S3 is great serving static files. In combination with CloudFront you have a fast and globally available website running in minutes and with a free SSL certificate.

I have my .travis.yml configured to deploy continuously to S3 after each commit on the master branch.

The backend is build using Travis in a Docker container, pushed to hub.docker.com and running on my VPS.

React Snapshot

By default the create-react-app doesn’t provide any tools or configuration to have server-side rendering. This means that when you visit Clipboard.ninja without Javascript enabled, you’ll be presented with a white page with nothing on it. For normal visitors this isn’t an issue because +/-99% have Javascript enabled. But bots and spiders who want to index your website to include into their search-engine don’t have full support for Javascript.
This would mean your website doesn’t get indexed and never shows up in the search-results, that’s never a good thing for a public website πŸ˜‰

Because I liked my setup with AWS S3 I wasn’t looking for server-side rendering. I just wanted to pre-render the static HTML files and serve those to the browser before the Javascript takes over and makes everything interactive. This led me to React Snapshot.
It’s very simple to set up and doesn’t require additional configuration.
It does exactly what I was looking for;

  1. Webpack builds the production bundle.
  2. React Snapshot is started and spins up a webserver to serve the static files from the production bundle.
  3. A crawler (which supports Javascript) starts crawling the website and creates HTML files for every page it finds.
  4. The HTML files are placed in the build folder, replacing existing HTML files.
  5. The build folder is uploaded to S3.

Simple and very effective!

React Native

As said, the old Clipboard.ninja also has an Android app.
I originally build this in Java, it is just a WebView nothing fancy. But I lost the code and I wanted to update the app icon to match new the design.
So that gave me a good reason to try out React Native!

Setting up the environment took some time and learned me that I can’t run VirtualBox and an Android Emulator at the same time.
After that, creating the new Android app was easy!

Result

I’m very happy with the result on Clipboard.ninja!
With all the tools I used it was so easy to create an app that;

As with every pet project, I still have a list with todo’s to keep improving πŸ™‚


Leave a Reply