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 ./
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?
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.
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.
And, done! The app is now available here.
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!