How to Build and Deploy a Vue.js Application Using Strapi on Render

This article is a guest post by Ukpai Ugochi. She wrote this blog post through the Write for the Community program.

When people need to build an application, they need to hire the service of a software developer. Also, if you're building an extensive application, it may become difficult to manage it on your own.

This is where content management systems (CMS) come to play. With CMS, you can create and manage your application easily with little or no coding.

Strapi is an open-source Headless CMS for NodeJS-based applications. Headless CMS is a backend CMS that makes content accessible via an API (Application Programming Interface). Strapi helps you set up and manage your application with Node.js as your backend.

You can quickly integrate frontend Frameworks of your choice, create mobile apps or even IoT devices with Strapi. One of the Frontend frameworks that you can easily integrate with Strapi is Vue.js. Vue.js is a JavaScript Frontend framework. With Vue.js, you can create web applications quickly.

Render is a cloud service that allows you to deploy and update your application automatically. Render will enable developers to deploy and host their applications online quickly and efficiently. For example, Render comes with a fully managed SSL. So that developers don't need to set up proxy servers to secure their applications.

This article will create and deploy a simple e-commerce application with Strapi as our Backend and Vue.js as our Frontend framework.

This article aims to understand the simplicity of Strapi CMS and how to deploy a Strapi application successfully on Render.

This article will create our application with Vue.js 3, the third version of Vue.js. Vue.js 3 is the current version of the Vue.js framework. There are many versions of Vue.js, and we'll be using Vue.js 3 because of the changes in composition API, creation of multiple v-model, and new lifecycle hooks.

Prerequisites

To create this application, here are a few things to note.

1. You need to install Node.js in your working environment. Without Node.js version 12.x and above, you can't install Strapi.
2. You should be pretty familiar with Vue.js.

Strapi Set-Up

We'll be creating our first Strapi project, which will be our application's backend. To create a Strapi application, run the command below in your CLI.

1npx create-strapi-app my-project --quickstart
2
3/** OR **/
4
5yarn create strapi-app VueStrap --quickstart

You don't need to worry about installing NPX as it comes with Node.js. It is a package manager that allows you to use CLI tools and other executables easily. After creating your Strapi project, start your application with

1npm run develop
2
3/** OR **/
4
5yarn develop

Then, navigate to http://localhost:1337/admin to create an admin panel. After authentication, we'll be creating API endpoints for our store. Our store items will have the endpoint /storeitems, So if we want to fetch our store items, it'll be GET /storeitems.

To create our store items with Strapi, we'll create a store items content type that will hold and manage the data structure for our store items.

Click on Content-Type builder under plugins in your navigation panel or navigate to http://localhost:1337/admin/plugins/content-type-builder/content-types/plugins::users-permissions.permission in your web browser. It'll direct you to the page below.

Click on create new collection type:

Fill in the Display name with storeitem and click on continue. It'll direct you to the page below:

Select a field for your collection type, click on Text, fill in name as Title. Under Type, click on Short Text, then navigate to advanced settings.

In advanced settings, tick the Required field and Unique field, then click on the finish button.

Now, it'll take you to the content-types builder page. Click on Add another field to this collection. Repeat the steps above to create more additional fields for Description, Price, and Image.

Select a field for your collection type, choose Text for Description, Number for Price, and Media for Image.

At this point, your store item dashboard should look like the image below.

Next, click on the green Save button. It will restart your server and implement the /storeitem endpoint you just created. In your navigation panel, you should have storeitems under Collection Types.

Click on Add New Storeitems so that we can add items to our store. Fill in all the fields, click save and click on publish. Continue this process until you have enough store items for your application. I now have some products in my storeitem dashboard.

Although we have published our storeitems, if you navigate to http://localhost:1337/storeitems, you'll get a 403 error. To avoid this error, we have to give public access to our API endpoint.

From your navigation panel, navigate to settings > Roles > Public. Click on find One and find under permissions and click on the Save button.

What we have just done is permit unauthenticated users to search for all of our store items or just one item with the item ID. Now, navigate to http://localhost:1337/storeitems. You'll see all of the store items you created in your web browser.

As you'll see, all of the items you added to your store are now viewable via http://localhost:1337/storeitems. However, this isn't close to how any application you know looks. To give a final touch to our application, we'll use the vue.js framework.

Vue.js Set-Up

To use the vue.js framework, you can install it via your command-line interface (CLI) with npm. npm is a Node.js package manager. Since we already have Node.js installed, this package manager comes with it. Run the command below to install vue.js.

1npm install -g @vue/cli

After installing vue.js, we'll create our Vue project for the Frontend of our application. Run the command below to create a vue.js application, choose the Vue 3 preset. Try as much as possible to place your application's backend and Frontend in the same directory, although it's not compulsory.

1/**vue create appname**/
2vue create store

Navigate to store with cd store in your terminal. Run npm serve to make sure your project is working fine. Now, we'll work on the application's Frontend by adding headers, footers, and other styles. Next, we'll call in our products from our backend to our Frontend.

We'll be using Vue 3 and Bootstrap 5, and Material Design 2.0 UI KIT because BootstrapVue doesn't support Vue 3 yet. We can install this package via npm with the command below:

1#install Vue 3 and Bootstrap 5 and Material Design 2.0 UI KIT
2npm i mdb-vue-ui-kit

After installation, you'll need to include the Vue 3 and Bootstrap 5, and Material Design 2.0 UI KIT Cascading Style Sheet (CSS) in your main.js file. To have this, add the codes below in your main.js file.

1import 'mdb-vue-ui-kit/css/mdb.min.css'

Now, your main.js file should look like the image below:

Next, in your HelloWorld file at components/HelloWorld, we'll create a simple header and cards to hold our store items. Discard the contents of your HelloWorld file and add the following lines of codes to it.

1<template>
2<div>
3  <header>
4    <!-- Navbar -->
5    <MDBNavbar expand="lg" light bg="white" container>
6      <MDBNavbarToggler target="#navbarExample01"></MDBNavbarToggler>
7      <MDBNavbarNav collapse="navbarExample01" class="mb-2 mb-lg-0">
8        <MDBNavbarItem to="#" active>
9          Home
10        </MDBNavbarItem>
11        <MDBNavbarItem to="#">
12          Features
13        </MDBNavbarItem>
14        <MDBNavbarItem to="#">
15          Pricing
16        </MDBNavbarItem>
17        <MDBNavbarItem to="#">
18          About
19        </MDBNavbarItem>
20      </MDBNavbarNav>
21    </MDBNavbar>
22    <!-- Navbar -->
23    <!-- Jumbotron -->
24    <div class="p-5 text-center bg-light">
25      <h1 class="mb-3">Store Items</h1>
26      <h4 class="mb-3">Subheading</h4>
27      <a class="btn btn-primary" href="" role="button"
28        >Call to action</a
29      >
30    </div>
31    <!-- Jumbotron -->
32  </header>
33<div v-if="storeitems.length">
34  <MDBRow :cols="['1','md-4']" class="g-4">
35  <div v-bind:key="storeitem.index" v-for="storeitem in storeitems">
36    <MDBCol>
37      <MDBCard>
38        <MDBCardImg :src="imageLink + storeitem.image" top alt="..."/>
39        <MDBCardBody>
40          <MDBCardTitle>{{storeitem.title}}</MDBCardTitle>
41          <MDBCardText>
42            {{storeitem.description}}
43          </MDBCardText>
44        </MDBCardBody>
45      </MDBCard>
46    </MDBCol>
47  </div>
48  </MDBRow>
49  </div>
50</div>
51</template>

What we have just done is called iteration. We have used conditional rendering v-if and the v-bind directive. v-if determines what should be rendered while the v-bind attributes or a component prop to an element. Replace img-src with the location of your image in your Strapi backend.

Next, we'll be fetching our data from Strapi into our application to fit into these cards we've created. We can use an external library Axios, an HTTP client for the browser and node.js, to fetch our data from Strapi.

However, we'll be using the fetch() method since this will be a simple application. Directly after <template></template>, we’ll be creating a section for our scripts.

Put the codes below directly under your <template></template>.

1<script>
2import { MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBNavbarItem, MDBCol, MDBRow, MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardImg } from 'mdb-vue-ui-kit';
3export default {
4  name: 'HelloWorld',
5  components: {
6    MDBNavbar,
7    MDBNavbarToggler,
8    MDBNavbarNav,
9    MDBNavbarItem,
10    MDBCol,
11    MDBRow,
12    MDBCard,
13    MDBCardBody,
14    MDBCardTitle,
15    MDBCardText,
16    MDBCardImg
17  },
18  data(){
19    return {
20      storeitems: [],
21      imageLink: "http://localhost:1337/storeitems/"
22    }
23  },
24    mounted() {
25    fetch("http://localhost:1337/storeitems")
26      .then((res) => res.json())
27      .then((data) => {
28        this.storeitems = data;
29      });
30  }
31}
32</script>

Now, let's get to understand what we have written in our scripts section. We have imported our Vue 3 and Bootstrap 5, and Material Design 2.0 UI KIT with the first import sentence.

Next, we'll be exporting the HelloWorld file, components from Vue 3 and Bootstrap 5 and Material Design 2.0 UI KIT, and our mounted lifecycle. The mounted lifecycle hook is called after your Vue instance has been mounted.

In our case, our mounted lifecycle hook contains our fetch method to call our store items from Strapi.

All set, now the next step is to deploy our application to Render. You can decide to deploy your application separately, i.e., deploy the Frontend separately from the backend or as a single entity (Frontend and backend in one folder).

To deploy your application in one entity, we'll put our application's Frontend and backend in one directory and make it in such a way that one command starts our application's Frontend and backend.

Or, we can deploy our application's Frontend and backend separately on Render. To do this, we'll be pushing our Frontend and backend to different repositories on GitHub.

Next, we'll follow the steps below to deploy to render:

Create Render Account

The first step is to create a Render account if you don't have one. If you already have a Render account, navigate to https://dashboard.render.com/.

Select Service

You can choose many services from in services, but we'll be focusing on web services.

Click on New web services then you'll be asked to connect your GitHub or GitLab account to Render. After authorizing Render on GitHub, pick the repository holding the application you want to deploy to Render.

Next, you'll need to fill in commands to start your Strapi application, as shown in the image below.

When you click deploy, the deploy process for your application will begin. It'll take some time to deploy. After that, you should see deploy successful at the top of your page. You can now visit your newly deployed site with the link at the top of your page.

Next, we'll deploy our Strapi Frontend, which we made with vue.js. The configuration will be a little different. You'll create a static site instead of a web service. Fill in the configuration as shown in the image below.

Conclusion

Building and managing your application doesn't have to be a difficult and overwhelming task. There's a need to focus on shipping features to users for many organizations rather than fixing our managing their websites.

This is where Strapi comes in:

With Strapi, you can build, manage and secure your applications quickly. Strapi also has some starters that provide a starting point to develop your Strapi applications with popular frameworks and libraries.

This article has created and deployed a simple web application with Strapi and Vue.js on Render. We have to fetch data from our Strapi backend to Vue.js and iterate data with the v-bind directive and conditional rendering v-if.

We also discussed the mounted lifecycle, and then we talked about deploying our application on Render. We first created a Render account; then we selected the database and storage option of our choice before deploying our application on Render.