How to upload HUGE Frontend Builds to your Shared Webspace (Gatsby, NextJS) with ease?
Shared Webspace Hacks #1: How to upload large frontend builds with hundreds of thousands of files to your shared webspace without wasting a lot of time? You only need my ready-to-use PHP and Gulp scripts and a hosting service running PHP.
Problem: No SSH access at Shared Hosters
If you have a cheap traditional shared webspace (like Apache, PHP, MySQL) for hosting your frontend assets like myself, you usually lack ssh access. That’s why we can’t just compress our build files, upload the zip, and extract it again on our server with help of the command line. In contrast, we’re only able to upload each of our files separately using an FTP client or the web interface of our hosting provider.
That’s absolutely fine for smaller projects with large bundles, but a limited number of individual files. But as soon as you reach higher file numbers, you will quickly get into trouble!
Transferring 2 GB to a web server is not a big deal nowadays. However, the time it takes to upload this amount of data to your server will heavily depend on how many files you have: 1 zip only vs. 200k individual files. For each file, your FTP client has to establish and close a separate connection to your server. That’s why it’s usually a lot faster dealing with one zip only.
Prerendered frontends can be huge (Gatsby, NextJS)
I recently started a Gatsby project generating more than 10k static pages (prerendered), resulting in a huge amount of files I had to transfer to my webspace.
After spending more than 2 hours uploading the HTML, CSS, and JavaScript files, I realized I did a mistake while building my application. I had to start over again! That’s when I did some research and came up with the following solution.
Solution
Most shared webspace hosters offer running PHP based Content Management Systems like WordPress or Drupal on their webspace. We’re going to have some PHP scripts on the destination server. We’re going to use GULP scripts (task runner) to compress and deploy your frontend artifact. Later, we’re triggering an extraction zip…
