It has been a couple of years since I played with React, and I want to update my skills and make things work in my new Kubernetes environment. Since React was designed by Facebook, and I ditched my Facebook account a year or more ago, I’ll make my own Facebook-like application. Except, in the words of my favorite cartoon robot, Bender, “with blackjack and hookers”.
My goal for this project will be two-fold. First I want to create a modern and relatively complete web app that is easily deployable to any cloud service. And second, to collect data on any friends I rope into helping me test this thing out and display it in a pleasant and innocuous way so nobody suspects.
Obviously this is too big of a project to talk about in just one post. This article will only talk about very basic React, how to start a project, how to get it deployed, and how to make it security enabled. I plan on making future articles that will attach a backend, talk to a database, and ensure secure communication between the front and back end. Then an article that will document building out the UI, And finally, an article that will document moving it all to the cloud to be publically available.
I will try to tackle the harder subjects upfront. The typical tutorial shows you how to put a button on the screen. I’m going to show you how to tie it to authentication, how to make your application containerized, and how to run it in a real environment, not just http://localhost:3000. Things like CORS are real headaches in real environments. If we’re going to make a ‘real’ application, let’s not brush over those because they’re too hard.
I’m going to build this new application in small, incremental steps. And the first step is to get something to the browser. I’m not going to worry about anything else, just a basic web app that displays something. This will involve bootstrapping a React app and learning to build and run it from the command line.
Since we’ll be building and running locally at first, you will need to have Node.js ≥ to 14.4 and NPM ≥ 6.14. You will also need Docker as we will be containerizing the application, and finally, you should have access to a Kubernetes cluster. Having a Kubernetes cluster in a cloud provider would be nice, but if you want you can run a cluster locally. The latest versions of Docker Desktop for macOS have Kubernetes built-in, you just need to enable it. Other than that, a text editor and command-line terminal are the only requirements. Some of the commands will assume you are running the Chrome browser, but there should be alternative commands for other browsers.
You might ask ‘if we are creating a front-end, why do we need Node.js?’ It’s because React applications are compiled and built. Even though JavaScript is a scripting language, React adds an HTML-like syntax to JavaScript so that it can render HTML pages on the fly. It then packs all the necessary JavaScript into a compressed format so that it can be loaded quickly by the browser.
Jumping right in, we can use the create-react-app package to create a project. As for the name of the project, since we’re going to create a Facebook-like app but ‘with blackjack and hookers’, we’ll call it Blackbook. We’ll start this all off with this simple command:
npx create-react-app blackbook
The npx command is the package runner that comes with npm. In this case, it’s running create-react-app and putting it in a directory called blackbook. Then we can change directories and run the new application:
cd blackbook
yarn start
#kubernetes #okta #docker #nodejs #react #programming
