A few months ago I had just completed Codecademy's Full Stack Developer course and was looking around for ways to deploy JavaScript apps on the web. The first solution I found was NodeJS. But at the time I could not find a service that offered NodeJS deployment for free. I know that at the moment, at least Google Cloud provides NodeJS deployment on their free tier. And there may be other services too.
Another reason I prefer vanilla JS to NodeJS or any framework is its simplicity, flexibility, and reliability. I didn't want to worry about updated node modules and framework documentation. MDN is enough for me, you can keep your frameworks for thee!
Anyway, at the time, my search continued. I found out that the majority of services offering free hosting or free servers only provided full or most features for free on PHP based servers. I had not yet learned PHP. I needed a service that allowed the features listed below for free, or for free up to a certain amount of traffic on servers running JavaScript. I reasoned that the best way to practice is to do things yourself in the real world. So if I could get these features to start with, I would have a much better chance of improving and competing in the market later.
The features I needed were:
- A VM or actual computer so I can execute JavaScript code on the server-side.
- A permanent database I can write to and read data from in JSON format.
- Support of HTTP methods PUT, POST, GET and DELETE.
- Support of URL parameters
- File storage - but at the time this wasn't necessary, I had other options.
- Access to external services, especially CDN JavaScript libraries - my preferred alternative to Node modules.
My search brought me to Google Apps Script.
What Makes Apps Script Work For Free Vanilla JavaScript Deployment?
Apps Script is a scripting platform developed by Google for lightweight application development in the Google Workspace platform. Scripts are created as part of an Apps Script project. See the figure below for how a basic HTTP GET request would work in an Apps Script setup.
An Apps Script project is basically a collection of JavaScript and HTML files. When deployed as a web app, every time a user visits or makes an HTTP request to the app, these files will be executed. In Apps Script, script files have an extension of gs instead of js. And the Code.gs file is the first file executed by the V8 JavaScript engine every time the web app is run.
When a GET request is initiated on the web app, the inbuilt function doGet is run. The doGet function has to be defined in the Code.gs file. doGet is passed the request event whose properties are defined here. doGet along with another inbuilt function, doPost are the only functions that will be called when an HTTP request is sent to your web app. doGet responds to HTTP GET and doPost responds to HTTP POST.
Inside the doGet, you can read the event object and based on parameters and other properties, perform a specific set of JavaScript functions server side. In your custom functions, you can import JavaScript libraries or other data from external services using Apps Script's URLFetchApp. Alternatively, you can just copy the JS files you want to include in your project and add them as .gs files in your Apps Script project.
Google allows you up to 6 hours of script runtime per day on a free account. In my opinion, that is plenty to get a project in the real world off the ground. That is, off the ground to earn enough to pay for services.
To get a clearer picture, let's take a walk through my first real-world project. Below are screenshots of a full-stack website I made for a local swimming club. The site allows log in via Google, uploading pictures, posting stories with full HTML support, and updating some front-end site details - addresses, locations, contacts e.t.c. You can go through the code here.
So, let's see how I'm implementing each of the features I listed above.
A VM or actual computer so I can execute JavaScript code on the server-side.
Apps Script is basically just a V8 engine hooked to an endpoint. I'm able to write pure JavaScript server-side, albeit with some limitations. I do have the added advantage of being able to access Google services directly from Apps Script.
A permanent database I can write to and read data from in JSON format.
Right now, I'm using Google Sheets as my database, and it's doing pretty good! See waterfall test results below (takes about 4 seconds to finish). But, from Apps Script you can hook up to Big Query and other various database solutions available in Google Cloud. Apps Script itself serves the responses a stringified JSONs.
Support of HTTP methods PUT, POST, GET and DELETE, and URL Parameters.
Apps Script does support URL parameters, but it only supports HTTP GET and HTTP POST. Depending on the database solution you end up using, you'll have to write your own custom PUT and DELETE server-side based in url parameters.
File Storage
Apps Script allow you to connect to external services through an inbuilt function that functions very similarly to JavaScript's fetch. This allows you to theoretically connect to services like OneDrive and other storage solutions as well. One limitation is, Apps Script is designed to deal with text data mostly. So everything you pass through it has to be converted to text first. Right now my implementation is; I just have it hooked to Google drive. On uploading, they are parsed as a base64 string, only being reconverted when they are being saved to Google Drive. The same thing happens on download, they're read as base64 string from Google Drive, then reconverted to their appropriate format client-side.
Conclusion
Apps Script is a pretty good alternative for server-side JavaScript deployment. I would recommend it to anyone who loves coding in pure JavaScript, but I'd recommend it more for learning or making/testing small-scale apps. There's certainly a lot of limitations compared to something like NodeJs + Docker or even NodeJS + Google Console. But in my opinion, being able to set up web apps quickly and reliably in pure JavaScript is a pretty compelling advantage.
Anyway, let me know what you think of all this in the comments.
Top comments (0)