Production-Ready React App Setup With Next.js and Dokku
This is how I created and pushed a live React app with a minimum budget in my pocket
In this article, I’ll talk about my website powered by React. By the time of writing this story, there is almost nothing in terms of functionality. Until this point, I was more concentrated on a stable app skeleton, but I plan to evolve it and share my experience along the way in future posts.
My today’s goal is a minimum budget as a starting point with an option to scale in the future. Also, I am willing to have complete control over infrastructure and rights to use it as a commercial project in the future, so I am choosing a self-hosted solution instead of SaaS services or website builders.
Prerequisites
- Base programming knowledge
- At least $34 in your pocket to buy a domain name and activate a hosting
- Node.js 12.22.0 or later
App Skeleton
You can skip this chapter, clone my barebone GitHub repository, modify it with your details, or read along and see how I did it.
Sometimes it’s hard to start a new project as lots of initial setups are required for everything to work together nicely. To overcome this, I decided to go with create-react-app, which should give me the latest bundle of webpack, Babel, ESLint, and other amazing features to power my app.
A day after, when I got to the deployment part, I realized that there is a more modern way of bootstrapping new React applications, and some approaches used in Create React App are already deprecated.
Likely, you can save some time and skip that mistake by using Next JS for your next React app.
Preparing Remote
Before deploying our app, we need to create some accounts and do the necessary server setup.
GitHub repo
Private and public repositories are supported and free, so push your code to GitHub and create your personal access token. That will allow us to set up an automatic build&deploy workflow later on.
Cloud server
I am using Hetzner, but you can use any other Cloud provider until they have servers with remote SSH. Now cheapest Hetzner server costs €4.15/month, and I am sure it will be more than enough to start from and quickly scale once your incoming traffic grows.
To make it even cheaper, you can use my referral link and pay only the remaining €30 for the first year instead of €50.
We will use Dokku to manage our server. A little setup is required here, but it will allow us to host more than one React App on the same server at no additional price, so it’s worth a hassle.
To complete Hetzner/Dokky setup, you can follow the steps from my previous article above to find out <your_cloud_server_IP>.
New Dokku app
Now we need to connect to our server with SSH and create a Dokku app.
ssh root@<your_cloud_server_IP>dokku apps:create <app_name>
dokku proxy:ports-set <app_name> http:80:5000
Nothing more is needed as Dokku will automatically identify, install all dependencies, and build our app with the help of heroku-buildpack.
Domain Name
I am using Namecheap, but you can choose any other domain provider that supports custom DNS records.
In your domain name DNS records, you need to add A record pointing to <your_cloud_server_IP>
Finding a good domain name might be a task for days or weeks, but don’t spend much time or money on this, especially if it’s your pilot project. It’s always possible to change it in the future.
As of the time of writing this article, my favourite “codonator” domain names are available starting from 1.79$ a year.
Release It
We can finally release our app and watch Dokku doing its magic.
ssh root@<your_cloud_server_IP>dokku git:allow-host github.com
dokku git:auth github.com <username> <github_access_token>
dokku git:sync --build <app_name> <github_repo_link>
Once our app is deployed, we can assign a domain name and enable HTTPS by generating a free Letsencrypt SSL certificate.
dokku domains:add <app_name> <domain_name>
dokku config:set <app_name> DOKKU_LETSENCRYPT_EMAIL=<your_email>
dokku letsencrypt:enable vladmykol-app
dokku letsencrypt:cron-job --addWhat Next?
Next time I want to add some new features to my React app, I push it to GitHub and run the following commands to release it:
ssh root@<your_cloud_server_IP>
dokku git:sync --build <app_name> <github_repo_link>No more local builds and FTP connections to the server. This is a nice and steady prod-like setup.
There are still a couple of security features that need to be configured. Using a root account is not recommended. However, for sake of simplicity, that is still the case in my examples, not room ssh and Server firewall setup.
Final Thoughts
I am using the above approach to host five different apps but paying only for one domain name and one remote server. That is where Dokku (docker containerization) shines in all its beauty.
A first setup costs the full $34, but every next application comes with 0 prices until a server has enough capacity. My estimated cost for every next non-promo year is around $63, which is still the best price among other SaaS solutions, and I will recommend this way of hosting React App with Next.js and Dokku on Hetzner.
Brill! Indeed you are a curious reader if you got to this point. Now, pat yourself on the back and see you in the next round.
Want to see a full source code?Here's my GitHub repo: https://github.com/vladmykol/biolink-clone
