Thanks to Cyclic.sh for sponsoring this article!
After a long day of programming, I came back home, went into the shower, and a series of thoughts suddenly crossed my mind...
It is a known fact that phones have truly come a long way. From bulky communication devices, to little computers that fit in our pockets.
It's amazing that these little rectangles are able to make calls, take professional photos, and even do complicated AI processing.
But with all this power, who’s to say that one cannot use their phone to write a full-fledged program?
So I took it upon myself to solve this little mystery. In this article, I'll show you how easy it is to write a full-stack app, using nothing but your phone, and a little magic from Cyclic.sh.
We'll build an app for scheduling posts on DEV.to, since that's not an official feature as of yet. I hope that you find it useful :)
Let's begin!
Setting up our IDE 💻
Installing Termux
Although it’s available on the Google Play Store, that version is outdated.
To install the latest version of Termux, you have to visit F-Droid.
After that is done, launch Termux, and explore the wonders of Linux, straight from your phone!
Please note that it’s important to run these two commands before doing anything, because that will prevent a lot of issues going forwards:
pkg upgrade
pkg update
Installing Git, Github CLI, and Vim
It wouldn’t be Linux if we didn’t have Git, and our favorite text editor, Vim! We’ll also use Github CLI to simplify the Git workflow.
Installing these is as simple as figuring out how to close Vim ;)
pkg install git gh vim
And we wouldn’t be able to make a web application without the help of Node and its packaging system, NPM. They’re also super-easy to install:
pkg install nodejs-lts
Making the front-end 🤷♂️️
This was a lot easier than I thought it would be…
Developing a Vue app, on mobile!
It’s a lot easier to build a webapp starting from a good template! Running this command does exactly that:
npm init vue@latest
I won’t go into depth on how I made the front-end code, since it’s pretty simple. Instead, here's a short video of me coding with Vim:
Spoiler alert: it’s pretty rough on the fingers!
Making the back-end 🙅️
You’d think that this part would be complicated, but with Cyclic starter templates, it’s as easy as pie!
Creating an Express server, with Cyclic
I used Cyclic’s Express template to save myself from hours of coding.
With the help of Cyclic’s mobile-responsive website, this was a freakishly easy thing to do.
Connecting our Cyclic API to the front-end
How do we go about connecting a back-end to a front-end? Simple. HTTP Requests!
Note: we also have to setup CORS, but for quick usage, it can be done with one line of code:
app = express(cors())
Here’s the code, written on a mobile device:
Launching our server 🚀
This step can be a bit challenging. To deploy our back-end, we'd usually need to buy a server and spend hours configuring it.
Thankfully, Cyclic.sh saves us from all this trouble. With Cyclic, we can deploy our server for free, and effortlessly make it work with any Github repository.
Integrating Cyclic with our Github repository
With the help of Cyclic’s mobile-responsive website, this was a freakishly easy thing to do.
Deploying with the click of a button
After finishing all this work, it’s time to relax, kick-back, and deploy!
With Cyclic, deploying means clicking a single button. It’s so simple that you don’t even need a computer to do it!
Conclusion
What a journey! And you know what the most surprising part is? It actually works!
Wanna see it for yourself? Here's the source code, and here's the live app.
We used many tools in this journey, ranging from VueJS and TailwindCSS for the front-end, to Express and Cyclic for the back-end. And the power of Cyclic extends even ways beyond that!
In fact, Cyclic can deploy any kind of app, ranging from React to Svelte to NextJS. Pretty neat, huh?
Now, if you were to attempt this challenge, what would you have done differently?
Discussion (9)
maybe 2 space tab is best for compact coding.
Wait y'all don't use 2 space tabs in html, css, js?
Awesome!!
I'd have used replit.com for coding on a phone. Agreeably, 2 tab spacing is the best for smaller screens.
How did you manage the responsive ? (if there is any).
Fun challenge!
Grat for app making in phone, that is challenging.
Thanks!
Funny, not sure I recommend it, but definitely funny :D
However, you can rapidly (less than 1 second) create a Web API, and an Angular frontend with your phone using our CRUD generator, for then to afterwards edit the generated files using the integrated Hyper IDE, that works 100% perfectly from any device you might happen to have ... ;)
You don't even need to download or install anything, the entire process would take you some 2-3 minutes using nothing but your phone ^_^
"how not get bored on family parties"