So, I created a small Angular app (a website basically), self contained (for now), that works nicely. I used it to help me in learning Croatian, so it's basically a word app. There's plenty of them online, but none that I liked.
I wanted to access the app from my phone, which means it needs to be hosted somewhere.
Nginx on Raspberry Pi
Initially I installed Nginx on my Raspberry Pi at home
Started it using the usual /lib/systemd/system/nginx.service.
Configurations as usual in /etc/nginx.
I uploaded the Angular files in /var/www/html and that worked fine.
The IP adress is http://192.168.2.4/, only accessible locally from my own network, of course.
But, of course I wanted it available for travelling as well (and didn't want to expose my Raspberry Pi to the Terrors of the Internet).
There's plenty of ways to make the Angular website available.
Github Pages
I could have hosted the Angular files in a repository on Github.pages1 and then accessed them from there. That would work.
But I didn't feel like doing that2.
It would mean making a repository with the name of the project or my account name and putting all the build Angular files there.
Netlify
I choose to go with Netlify. They have a free tier and play well with Github.
As soon as I commit new changes to my Angular project in github3, Netlify picks up those changes, builds the Angular project and deploys it to the website4.
I was very impressed!
It's a good example of Continuous Delivery5.
So, the steps were basically as follows:
- sign up at Netlify with your github account
- create a new site from Git
- pick a repository
- specify site and build settings and all that.
Some notes
Automatically a hostname is generated for you, something like belnazzar-troublesome3.netlify.app. If that is not to your liking you can change the hostname of the site (just the first part) or even get a authentic hostname alltogether. (But I didn't need that.)
I did have the outputpath originally set to dist/polygo in my Angular app, and I changed that to "dist". Otherwise everyone has to go to "polygo.netlify.app/polygo" all the time.
Then there's the fact that Angular wants to do its own routing, but it cannot do that if you do not end up at de index.html page. For instance if you go directly to https://polygo.netlify.app/wordgame instead of https://polygo.netlify.app/.
Luckily the folks at Netlify have taken this into account6.
I created an src/_redirects file for redirecting everything to /index.html, so Angular can take over the routing.
I changed angular.json by adding src/_redirects on the assets array.
And bingo, it worked!
What's next?
Well, it suffices for my needs right now, but as I have the REST resources just committed in the Github Repository, expanding on the data is a bit of a hassle. I need to commit data changes to the repo, and Netlify redeploys.
It would be nice to be able to use a database.
I found some information on it at [7] on using Netlify Functions in combination with FaunaDB, but that'll have to wait for another time.
References
- [1] Github Pages
- https://pages.github.com/
- [2] Netlify.com - Github Pages vs Netlify
- https://www.netlify.com/github-pages-vs-netlify/
- [3] Polygo on Github
- https://github.com/maartenl/polygo
- [4] Polygo at Netilfy
- https://polygo.netlify.app/wordgame
- [5] Jetbrains - Continuous Integration vs. Delivery vs. Deployment
- https://www.jetbrains.com/teamcity/ci-cd-guide/continuous-integration-vs-delivery-vs-deployment/
- [6] Netlify Docs - Angular on Netlify
- https://docs.netlify.com/configure-builds/common-configurations/angular/
- [7] Building Serverless CRUD apps with Netlify Functions and FaunaDB
- https://www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/
No comments:
Post a Comment