Now that I had my backend with Strapi.js working, I needed to start setting up the frontend build structure.

While I am rather proficient with React.js, I recently learned Vue.js and so decided to keep that new skill going. To help with the build process and configuration, I chose Nuxt.js which is a all-in-one opinionated platform for building Vue.js applications for the mdoern web. Using it helps save considerable time in setting up your configuration, development, and deployment of your frontend.

Before I installed it, I needed to setup my respository structure. My repository root ended up quite simple:

/.gitignore
/build-all.sh
/frontend
/backend
...

The frontend and backend can be built independently but I also have a shell script to run the builds for both. I considered using a Makefile instead but right now shell scripts are working well for me. (In a later post, I will cover my build process which has now been integrated with Docker.)

Getting started with Nuxt.js was easy. I followed their installation guide.

Options I regret choosing when running yarn create nuxt-app <project-name>:

• I am pretty good at CSS, so I personally wish I had chose no styling / javascript framework. It just was not worth fighting someone else's opinionated CSS framework when I can write my own more quickly. If you are newer to CSS I highly recommend picking Bootstrap, though.

• I wish I had picked the Universal (SSR) option, even though it makes things a little more complicated. I have run into issues already with wanting to populate meta tags for my blog posts on the server. The reason is that sharing links on social media require that your og: tags (Open Graph) for the title, description, image etc. need to be populated in the first HTML returned from the server. Choosing SPA hampered me here so I will have to now add SSR back in to be SEO ready.

With Nuxt.js and my repository structure working properly, it was time to setup a proper debugging environment, which turned out to be a nightmare...