For my projects, I need a generic website setup that I can reuse for multiple projects.
I want to try out the following setup. A frontend build in Vue served as static files from Amazon S3. A backend built with .net core 2.1 as a REST API presented with Swagger. Finally, using Googles firebase authentification for login requirements.
Since I need a baseline platform for multiple projects, it needs to be generic enough to allow me to reuse the setup. Most of my projects need a similar setup with a frontend exposed to anonymous users and a backend dashboard which requires authentification.
In this article, I am going to cover how I set up the Vue frontend. In later articles, I will cover the authentification and the backend.
I do not have any specific reason for choosing VueJS except that I use it as part of my work, so it creates a synergy effect. And it seems to have the easiest learning curve of the bunch.
It has the significant effect that it can easily be replicated to edge nodes all around the world to make sure that users around the globe can load the site fast. Getting data from the backend is another story for a later article 🙂
Finding a VueJS dashboard template
For most of my projects, I foresee that some kind of administration interface is needed. Which means a login page with some type of dashboard behind.
My design skills are not that good so I prefer to find a template to build from, there exist multiple templates, but I found Vue Paper Dashboard to strike the right balance between aesthetics and functionality. CoreUI is another alternative.
Vue Paper Dashboard
Setting up the build process
If you clone the git repository, you get a complete setup, including a build script. So we only need to have npm installed to build everything. Run the commands
- npm install
- npm run build
After they complete, the build files will be available in the dist folder. Uploading this folder to a web server and we have our own version of the dashboard running. Easy peasy.
Development with Vue
Except for the build command, the template also supports npm run dev which runs a development web server with hot-reload. It means that when the files are changed the website will automatically reload the changes, making development super neat.
Combined with vue-test-utils we can write tests like this:
It is a test of a forgot password Vue component. It depends on Vuex and Vue-i18n which we need to mock out. But as you can see in the bottom test it is quite easy to test that filling the email field and clicking the button triggers the call to Vuex.
The important part is in the bottom, where jest is told how to parse .vue files using the vue-jest package.
Using Amazon S3 as a web host for static files
The cool feature of this set up is that the complete frontend is compiled to static files. It means that we can use any web server to host them with no specific requirements to the features.
It allows us to use Amazon S3 since it has edge locations all over the world and is easy to set up.
When you have created a bucket, just set public read permissions and select the feature “Static website hosting.”
Putting everything together
I want to have the following happen.
- When I commit and push to the master branch, a build should start
- The build starts by compiling the source and run all the defined tests
- If any test fails the build fails
- If all succeeds the pipeline pauses
- When I click a “deploy” button, the new version is pushed to S3 without any additional interaction.
It is quite simple; we tell the pipeline to load a docker image with node installed. Then we extract different environmental variables to a file. They are compiled into the application.
Then the files in the dist folder are stored as an artifact. The manual step reveals a button in the bitbucket interface that can be clicked to run the final step.
If any of the steps fail, the pipeline will stop. So there is no danger that we could deploy code that does not complete the tests.
You can find the complete repository here it is part of a larger project, so it is a snapshot in time, but feel free to ask questions on any part of it.
Level up your code newsletter.
Feel confident delivering your next project!
Actionable insights on how to improve your code.
Real-life examples on how to apply SOLID, TDD, Design Patterns. Not just hello world examples.
Being a professional developer is not just about code. I touch on many of the other aspects needed to succeed as a developer.