Official app for Gopher Wood Clinic.
This project uses the Sapper template, available for Rollup and webpack.
Install dependencies and run the project in development mode with:
cd gopher-wood
npm install # or yarn
npm run devOpen up localhost:3000 and start clicking around. If something fails, just as a note: the node version we are currently using is v14.17.0 (LTS when this is written).
Consult sapper.svelte.dev for help getting started.
Our source code is on our GitHub repo. We utilize Hostinger's VPS plan to host the app. The domain is currently bought from GoDaddy. The server that we have chosen in Hostinger is an Ubuntu 20.04 server. Digital Ocean has a lot of neat tutorials for Ubuntu, and for different versions as well, so it's definitely worth checking out what they have.
This is so that we are not always accessing the server with the root user, who has total control over the server and can accidentally perform destructive tasks that can take a lot of time and effort to repair.
On the server, we have installed all the necessary tools such as node, npm, git, pm2, nginx, mariadb, etc. Detailed steps can be seen on some documentation somewhere (Medium.com or somewhere else). Essentially, pm2 is used to run the app, and nginx is used as a proxy to connect our domain to the server. Of course, for the domain to be mapped to the server, we also need to point the DNS record on GoDaddy to our server's IP address.
In order to deploy the app, simply cd into the app directory, do a git pull, npm i if package.json has been changed, then npm run build. pm2 should pick up the changes automatically from __sapper__/build/ and serve the updated files. If your changes are not reflected, simply run pm2 restart [PID of our process] in the terminal. You can find the PID by entering pm2 list. If you need to start an entire new process, run pm2 start __sapper__/build to start serving the app. There should also be a service configured called pm2-gw-admin that automatically starts serving our app when the system starts up again (i.e. after a reboot).
MariaDB on the server is used to store IVC appointments, as well as the current queue number. As for real time functionality, we are using SSE with our existing MariaDB.
We use Sapper, a framework built on Svelte. Tachyons is used for CSS; read this article by Adam Wathan for an idea of why we use functional CSS. Svelte's preferred bundler, Rollup, is used, as well as Express. We use Express instead of the default Polka that comes with the Sapper template because of the way we are handling authentication.
With regards to Tachyons, how well it integrates with Sapper still remains to be seen. This is an ambitious attempt for us to use functional CSS, but we will remain open to other options as we develop our project - if an alternative comes up with a compelling argument to switch over, then we might. As of now, simply follow a few helpful guidelines:
export let styles = {} in <script> of your Svelte files, define functional CSS classes there, then use it as a class for your markup, i.e.
<script>
export let styles = {
h1: 'f1 tc'
};
</script>
<h1 class={styles.h1}>Hello World!</h1>::before and ::after are not supported by Tachyons, so we will keep using semantic CSS to style them.<style>
.dynamic {
font-weight: bold;
}
</style>
<p class:dynamic={condition.isTrue()}></p>For internationalization, we use svelte-i18n to accommodate both English and Traditional Chinese. The author of this package has an example with Sapper that we have referred to in order to incorporate svelte-i18n into our app.
Since Sapper uses Express, our we can write our server as well within the same application, and this is where all our APIs reside.
That's it! Go and get started on our Gopher Wood Clinic app :)
We use MariaDB on the Ubuntu server to store timesots and the current queue number.
To install MariaDB on Ubuntu, follow this guide by Digital Ocean.
It is also configured to only allow localhost connections, so remote attempts to connect to the DB will currently fail. Whether we open up remote connections at a later point will be decided when necessary.
Within the Auth0 dashboard you will see an application called Gopher Wood, and that is where our system is set up.
We currently only allow a social login through Google, and any routes under /admin requires the user to be logged in. However, I still need to figure out how to allow only specific email addresses to login, and disable the rest.
The above can be considered deprecated for now. I will try to set up Keycloak on our Ubuntu server so that we can manage our own users. We are going to use docker to install Keycloack since we will likely use docker eventually for deployment. To install docker, follow their official guide for Ubuntu.
I have currently combined these 2 categories into one because I don't have much to say about them yet. SEO should fall under PWA anyway, and we currently utilize Progressier to achieve some simple functions such as prompt to install, manifest.json and its required images, and the service worker for our app. It should generate the necessary headers as well for SEO, though of course we can still add on to whatever is generated. To check our Progressier's integration with our app, we can go to the Progressier Dashboard.
Simply put, master is the code base for production deployment. dev is used as a consolidation of all development work. Testing will be conducted on this branch and then merged into master. The following outlines descriptions and naming conventions of branches.
| Instance | Branch | Description | Commit Message |
|---|---|---|---|
| Master | master | Accepts merges from Dev and Hotfixes | N/A |
| Dev | dev | Accepts merges from Features | N/A |
| Features | feat-[issue #]/* | Always branch off HEAD of Dev | feat-[issue #]: description |
| Hotfixs | hotfix-[issue #]/* | Always branch off Master | hotfix-[issue #]: description |
Build a simple PWA with client and server in place, including proper security measures. Sync with queue calling machine.
IVC Appointment. Set up simple about and contact us pages.
Add admin pages:
CSS:
JS: