Sarcastic Text Generator pt. 3 - Deployment

sarcastic-text-generator Jan 30, 2021

This post is a continuation of Sarcastic Text Generator pt. 2

Picture of the completed app with input and output boxes, and a copy to clipboard button
The completed app

So, our sarcasm tool is built and working locally, excellent! Now lets deploy it so others can use our expertly crafted app.

Preparing the App for Deployment

We've got the code working locally, so lets run some magic commands so we've got a "thing" we can deploy somewhere. Actually, scratch that, we only need to run one command.

ng build --prod --base-href ./

This command will generate some HTML and Javascript files in the subfolder dist, and that's all we really need to do to make this app ready for deployment. The base-href command sets the base location that files will expect to be located relative to each other.

Deploying the App

We've got our files, and now all we need to do is host them on a simple server, somewhere. This is the beauty of using Angular for what we want to do, there's no server-side logic that needs to run, so a basic server like nginx for hosting static files would be sufficient. I'd also like to be able to host this app on a sub-section of my main site. This site is already using the Ghost engine, which is using nginx for serving pages, so lets modify what I already have to statically serve my Angular app, how difficult could it be?

Screenshot of a browser error page indicating website cannot be reached
Well.... damn

Well, that wasn't perfect, I made some modifications to the nginx config file, but wasn't paying enough attention. Fortunately, just running the command nginx outputs the current logs from nginx, and informed me I'd forgotten a semicolon. Lets try that again. The config file we want to edit is stored in /etc/nginx/sites-enabled. As SSL is being used on the site (and non-SSL requests are redirected), we'll need to be sure to modify the ssl version of the config file.

Screenshot of modifications made to the nginx configuration file
Modifying the nginx config file

With that change made, and the nginx service restarted, we now know that when we go to davidskerritt.dev/static/sarcasm, the request will pull up whatever is stored in the folder /var/www/static/sarcasm. With that done, all that's left to do is copy the files from the local machine to that folder, and everything should work fine.

scp angular-sarcastic-text-gen\* username@46.101.28.249:/var/www/static/sarcasm
Using SCP to copy files from local machine to remote

And, done! The app is now available here.

Complete app hosted on website
Complete app hosted on website

I've added a link back to the main blog site, because after seeing the high quality app, people will of course want to see who's responsible for it.

That's the end of this series, we've gone through the requirements for setting up a basic Angular app and component, taking some user input and modifying it with a custom pipe, prettifying the app with Material, building it, and then serving the app using nginx. The code for the project is available here, and stay tuned for more posts!

Tags