Sidecar Tutorial: Client-side

In this part of the introductory tutorial, we will be building the client-side app with Nuxt JS a supporting framework for Vue JS.

Inside your QuickApp project directory, create a directory for the client-side app:

mkdir app
cd app

Create a package.json file

touch package.json

Copy into the package.json file the necessary dependencies

{
    "name": "my-app",
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "generate": "nuxt generate",
        "start": "nuxt start"
    },
    "dependencies": {
        "@nuxtjs/axios": "^5.13.6",
        "nuxt": "^2.15.8"
    }
}

scripts define Nuxt commands that will be launched with the command npm run <command>

Add Nuxt to the project by executing the following command in terminal, which will install and add the necessary node modules to the project.

npm install nuxt

Add a Nuxt configuration file to the app project directory so that we can define global variables such as API URL and any additional plugins we'd like to add.

touch nuxt.config.js

Copy into nuxt.config.js the following configurations. The client-side will call the API on port 5000 once we containerise the application.

nuxt.config.js

export default {
    publicRuntimeConfig: {
        baseURL: process.env.BASE_URL || 'http://0.0.0.0:5000/'
      },
    server: {
        port: process.env.NUXT_PORT,
        host: process.env.NUXT_HOST
    },
    buildModules: [
    ],
    modules: [
    "@nuxtjs/axios"
    ],
    components: true,
    
}

In order to fetch data from the server-side API, the app will use Axios. Install Axios onto the app project setup, by running the following command in terminal.

npm install @nuxtjs/axios

Now, we can create a pages directory which will automatically create routes for each .vue file inside the directory.

mkdir pages

Create an index.vue file which will be the primary page on the app.

touch pages/index.vue

Populate the index.vue file:

<template>
    <div>
        <h1> {{ messages.message }} </h1>
    </div>
</template>

<script>
export default {
    async fetch() {
        this.messages = await this.$axios.$get(this.$config.baseURL);
    },
    data(){
        return {
            messages: [],
        };
    },
};
</script>

<style lang="scss" scoped>

</style>

The index.vue file in the pages directory will call our message in the server-side API and display it as a title.

If you are testing the application prior to containerising with docker, you may need to change the IP of the server-side app in nuxt.config.js temporarily to fit its default (port 8000 instead of port5000).

This concludes the required setup for the client-side app. The following step will containerise the application with the IndustryApps pre-defined Sidecar.