Rebuild Clipboard.ninja in React
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.
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.
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.
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 😉
It’s very simple to set up and doesn’t require additional configuration.
It does exactly what I was looking for;
- Webpack builds the production bundle.
- React Snapshot is started and spins up a webserver to serve the static files from the production bundle.
- The HTML files are placed in the build folder, replacing existing HTML files.
- The build folder is uploaded to S3.
Simple and very effective!
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!
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;
- Has a UI that is fully responsive on all screen sizes thanks to Material UI
- Is offline available thanks to Progressive Web App
- Is SEO friendly thanks to React Snapshot
- Is able to add to your home screen thanks to Web App Manifest
- Is also available in the Play Store thanks to React Native
- Is fast, globally available, served over HTTPS thanks to AWS CloudFront
As with every pet project, I still have a list with todo’s to keep improving 🙂