I think it's time to deploy. Let's check the feature checklist.
The user interface can do the following:
Enable the user to add a titleEnable the user to add a subtitleEnable the user to add a bylineEnable the user to select a font family for the textEnable the user to change the fill and stroke color of the textEnable the user to add technologiesSelect image from UnsplashDownload the final image from the website- Deploy site as a static SPA
The server can do the following:
Proxy unsplash searches and downloads from the frontend with the Unsplash API auth token- Deploy to Digital Ocean as an App Droplet.
Deployment is all that remains.
Digital Ocean
When it comes to Platform-as-a-Service (PaaS) providers, I've used Heroku in the past, though never in production. For production applications, I've relied more on AWS and Google Cloud.
With all these experiences to draw on, I've found PaaS platforms great for individual maintainers. It takes the hassle out of setting up, configuring, and securing Cloud Infrastructure. Nowadays, I'm certainly more willing to consider PaaS over Cloud providers due to cost and simplicity. Cloud infrastructure isn't a bad option if you have the engineering team to support it. Though... most clients and roles I've been in ... usually don't. I've also increasingly grown to dislike configuring servers for production use...I'd rather spend my time building the application.
Using Digital Ocean was a pleasant experience overall. I knew I wanted to deploy the frontend and backend separately. The frontend would be compiled as a Single-Page Application (SPA) that pointed to the backend. The backend was a simple Node.js Application.
Deploying the SPA
Quasar provides a build command that generates the SPA (quasar build). It was quite easy to deploy a static site using Digital Ocean by creating a new App.
I connected my Github account, selected the repo, opted for auto deploy (the ease of CI/CD is such a treat nowadays...) and selected a location and repo branch to deploy. DO detected that my application was a web application. I selected to build the App as a static site. I then added the environment variable needed to point to the Feathers server and the necessary build commands.
The build commands included installing the Quasar CLI, so it could be used to build the project, which would by default output the files in to the dist/spa folder. I would then need to specify that the dist/spa folder was the directory in which to serve the application from.
Once all the values were set, it was ready to build and launch!
I pushed the button...and it started building. And then it was live! I could see the application was successfully being hosted, but in order for it to work with Unsplash, I would also need the server running.
I ran into some issues where I just didn't put in the right information (specifying the right build folder, installing the Quasar CLI), but that's on me. Overall, this was far simpler than some other services I've used for SPA deployment.
Deploying the FeathersJS
I wrote a quick write-up detailing how to deploy Feathers on Digital Ocean at the start of this Hackathon. In going through that process, I already knew what I needed to do to run a Feathers Server.
The main difference with this deployment was the addition of environment variables, primarily the UNSPLASH_ACCESS key, which would be needed to successfully query the Unsplash API.
I followed the same steps: connecting the repo, selecting the location, and defining the application variables. Again, Digital Ocean detected that it was a Node.js application, so it offered the related Node.js settings. I updated the port, added in the UNSPLASH_ACCESS key environment variable, and added in the build commands.
Then I selected the plan for the server and launched the application. Once the build was complete, it was live.
Domain Management
In order for the frontend to reach the backend, I had to set up the domain correctly.
Digital Ocean offered to manage the domain for me or provided a simple copy/paste solution so I could update the domain records myself. I opted for the latter, since I already have something hosted on another provider that is managing that domain.
After updating the domain, it was fairly easy to test whether things were connected appropriately. If the server returned results from Unsplash to display on the frontend, everything would be working as expected.
I refreshed the page...and things were working!
It was finally LIVE!
Check it out: Blokii Image Maker - https://img-maker.blokii.com
And, to test it, I used it to make this blog post image!
(and in doing so, have already seen areas that could be improved, haha).
Please note, it's not very mobile friendly yet...
Let me know what you think. Feedback always welcome!
Top comments (0)