Mailing List App: Installing Nuxt (Part III)

We reach to the third post on the Serverless Mailing App. In the previous chapters, we have seen the project definition, and more recently we start preparing our development environment, in the current post we will leave our environment ready to start programming the defined use cases.

As I described in the first article, our public website will run on top of a Nuxt SSR app.

To easily follow the tutorial, I have a Github repository branched step by step. We are at the end of the step-1 branch.

1.3.2 Installing Public Website Development Environment

The first step is to install the Nuxt framework if you don know it here is a little overview:

What is Nuxt?

Nuxt is a server-side rendering version of the VueJS frontend framework. It uses Vue on a Javascript server,

allowing to make search engine friendly webpages with Vue components.

I will list the main features of the framework:

• Server-Side Rendering
• Preconfigured Webpack: Transpiling, bundling, minifying, preprocessing sass, less, etc.
• Routing system prepared to deal with Async data
• Head tags management
• HTTP/2 push
• Modular architecture

If you want to dig in more depth on Nuxt, see the official documentation, it is well designed, clear, and easy to understand.

Installing Nuxt

We need to prepare the docker-compose config for the Nuxt app. Then we will bind it to our fake API gateway.

The first thing we need is the Yarn package manager for NodeJS. Open the docker-compose file add the following section:

With the above code block, I only installed the latest node official image and set its working dir at “/opt/website” directory mapped to the “website” volume.

Check if we have Yarn correctly installed:

docker-compose run --rm node yarn --version

We have Yarn installed and ready to use on Docker, come on and let install Nuxt app in “website” directory at the root path of the application.

docker-compose run --rm node yarn create nuxt-app .

In the “create nuxt-app” displays a UI where we have different options to choose between, as the project name, the language, the package manager, the UI framework, we can install official modules out of the box, select the testing framework and coding style, and the rendering mode.

Check the picture to view my selections. You can choose the better fit for your requirements or knowledge. The only thing that I recommend if we want to deploy it as a serverless application, do not use a default configured UI framework, or seek for the manner to load the generated CSS files and pictures in an S3 bucket(we going to deploy it in AWS).

After installing all dependencies, the console output may look something like that.

Now we will tell our NGINX API gateway where to find our project and in which path we want to load the public website.

We added a new section named “public website” build by official node image, this section exposes the port 3000 where the Nuxt app will stay listening, and the “yarn dev” command to start the service.

Also, we created the “website” volume and added the new dependencies to the NGINX API gateway.

Open the “nuxt.config.js” file and add the “server” key and set the “host” pointing to “0.0.0.0”.

Create an Nginx config file for the public website environment.

The above config uses upstream to simulate the API gateway, it will resolve all traffic to “/” to the next app, and all the traffic coming to “/api/v1/” will be pass thought our backend application.

Open “backend-api.conf” to create the backend upstream and do not set it as the default server.

Add instructions to copy this file in the Dockerfile.

The last thing we need to do is update our backend API’s router to match with our new server configuration.

We can run our server using the “docker-compose” command. Let see the current status of our development environment.

docker-compose up --build -d

Open a browser in the virtual-host you defined in the previous post, in my case dev.mailing.antidotfw.io, and check “/” path.

And opening the browser at “/api/v1/” will display the backend API homepage.

Congrats!!! In the current stage, we have our public website and the backend API running together on top of an NGINX API gateway.

Conclusion

In the current chapter, we dig more in-depth on the NGINX upstream usage, setting up our server as an API gateway for our different services.
Also, we learn a little about Nuxt, and we install it.

In the next post, we will create our initial production infrastructure using the Serverless framework and Bref for PHP lambdas.

Thanks for reading this post to the end, I hope you like the tutorial, if yes, you can help us by sharing it on your social networks.

Happy Coding!