Running ReactJS and Deploying from my iPad
Before this redesign, I had had my personal blog rocking the same design for over 4 years. That's a very long time ago. The good ol' days where we could gather in groups and shake hands to our hearts desire.
Anyway, I digress.
Since I got my iPad Pro 2018, I have been looking for ways to convert it into my secondary development machine. I have since then created wireframes, run a local server on the iPad using Raspberry Pi, and more just from the iPad. Now, I decided to redevelop my personal site on the iPad.
Choosing a technology
First, I had to choose a technology. What I wanted primarily was speed and ease of development and deployment. So after considering various options likeGatsby,Hugo,Statamic, I decided to go with something simple. My own CRUD set up usingNextJS.
So after choosing my technology, I decided to go with a simple design. I looked for some sites that did something close to what I wanted and built using those inspirations.
Creating a development workflow on the iPad
Unlike traditional desktop computers, when attempting to develop for the iPad, you have to think of a good workflow. This is because, unlike my Mac where I have one command line and every thing flows through there, I have to use dedicated apps for the iPad.
Yes, there are command-line apps for the iPad like Blink, which I use, but they are mostly used to connect to remote servers and thus are useless for this specific task.
Finding a suitable text editorThe first thing I wanted to find was a good text editor. With this, I would be able to code on the iPad. There are many options when it comes to this on the iPad. Before today, I already had a few. The one of which I used the most wasDraftCode.
The problem with DraftCode though is, it is primarily built for running PHP on the iPad locally. As a side note, if you are using DraftCode, you will quickly realise how hard it is to work with composer as the app itself does not do anything composer related. I will write an article on how I created aComposer alternative for the iPadthat I then use with my DraftCode.
Finally, i foundPlay.js. This is an iPad application that is built especially for my use case. It has an integrated editor, git support, running npm scripts, and more. With this power, I was able to run a full NextJS application on my iPad.
We found a winner.
Hosting and Deployment
Well technically this was the easiest decision I made. I already know of how awesome it is to useNetlify. All I needed to do was add the
netlify.tomlfile, and make a few changes and it was ready to be deployed.
Though the play.js application comes with itâ€™s own Git client, I actually preferred usingWorking Copywhich is a dedicated git client for the iPad.
Ignore the commit messages :P
After setting up my Netlify and Git, I could then develop and commit and for every push, there is a Netlify build which is deployed automatically.
This was a fun experiment creating an entirely functioning application directly from the iPad. Currently, like I said earlier, I connected my Raspberry Pi using USB-C to the iPad. This allows me to use the Pi as an ethernet provider.
With this power, I am able to run a local server on the Raspberry Pi and then view the local URL using the static URL on my iPad. This was I have been able to continue working on my personal project running Laravel all on my iPad.
I can just SSH into the local Pi server using Blink and then run all the commands I need. For file management, I also set the Raspberry Pi as a SMB server. I can then connect to the Pi using the native Files app on the iPad.
Perhaps I will write about this soon as well.
The source code is not public yet but I am sure that at some point I will make it so.