Setting Up The Backend | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)

Setting Up The Backend | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)

In the last lesson, we discussed how software backends work. We learnt that a backend comprises of different server applications which are installed and configured to provide various services. In this lesson, we will install some of those server applications for the backend of our Google Contacts Clone app. The server applications we will install are: 1. MySQL database server, and 2. Redis server. We will also install Postman which will be used for testing our API endpoints before we connect them to the frontend.

Installing and Configuring MySQL Database Server

  1. For Linux, open this link and follow the instructions to install for your Linux environment.

  2. For Windows, open this link and follow the instructions for your Windows environment.

  3. For MacOs, open this link and follow the instructions for your MacOS environment.

Write down the password you provided for the root user during MySQL installation.

Installing MySQL Workbench

  1. Download and install MySQL Workbench for your OS from here.

  2. When you are done installing, launch MySQL Workbench. Next you will add a new connection.

  3. Click the [+] icon to the right of the MySQL Connections title on the home screen. This opens the Setup New Connection form.

    1. In Connection Name field, enter: Root - Local Connection.
    2. Leave the Hostname and Port fields with the default values of 127.0.0.1 and 3306, respectively.
    3. Leave the Username as root.
    4. In the Password field, click the Store in Vault... button. Enter the root password.
    5. At the bottom right of the dialog box, click Test Connect. If everything is right, a success alert will be displayed.
    6. Click OK to close the dialog box. Then click on the Root - Local Connection connection now listed on the home. This will open the Workbench interface.

Creating the schema for our project

Schema is another word for database

  1. At the bottom of the Navigator panel on the left side of the Workbench interface, switch to the Schemas tab. Within the Schema panel, right click and choose Create Schema on the context menu. This opens the new_schema tab.
  2. In the Name field, enter google_contacts_clone_app as the name of the schema.
  3. For Charset/Collation, select utf8 as the Default Charset and select utf8_general_ci as the Default Collation.
  4. At the bottom right, click Apply. On the Apply SQL Script to Database dialog, click Apply to create the schema using the SQL statement shown. Click Finish when the success message is shown within dialog box.
  5. Check the Schema tab on the left-side of the interface. Now, you will see your newly-created google_contacts_clone_app schema.

Creating a User for our Schema (Database)

For our API server to connect to our database (schema), we need to provide an existing user within our database server and the password for that user. The user must have full access to the schema we want to connect to. By default, the root user has full access to any schema created plus full administrative permissions within the database server. So, we can easily provide the API server with the credentials (name and password) of the root user and move on. However, this is not recommended. It is not advisable to connect to a database (schema) for a web application with the root user. It poses create security risks. The root user should be reserved for administrative tasks which are usually performed over the command line (terminal) such as periodic backups, dropping of schemas, etc.

So, the recommended approach is to create a dedicated user within our database server which will have access to only the google_contacts_clone_app schema. Let's do this.

  1. On the left-side of the interface, switch to the Administration tab. Within the tab and under Management, click Users and Privileges. This opens the Administration - Users and Privileges tab window.
  2. Under the User Accounts panel, click Add Account. Within the Details for account... panel, do the following:
    1. For Login Name, enter: google_contacts_clone_user.
    2. For Authentication Type, select Standard.
    3. For Limit to Hosts Matching, enter 127.0.0.1. This is because we do not want connections to our local database server from the internet. Only within our local computer.
    4. For Password, enter a secure password and note it down somewhere. We will make use of it when setting up our API server. Confirm the password in the next field.
    5. Now, we want to specify which schema this user should have access to. Switch to the Schema Privileges tab. Click Add Entry... button. Within the New Schema Privilege Definition dialog box, switch to Selected schema and select google_contacts_clone_app. Click OK to close the dialog box.
    6. Now, we want to specify which rights the user has within the google_contacts_clone_app schema. At the bottom right of the Schema Privileges, click Select "ALL". You will notice that the GRANT OPTION is not selected. This is okay as we don't want this user to be able to grant other users rights.
    7. Click Apply to create the user with the attached privileges.
    8. The new user google_contacts_clone_user is now listed within the User Account panel.

You can close MySQL Workbench for now.

Installing the Redis Server

Follow the instructions in the article to install Redis Server on Windows, Linux, or MacOS.

When you are done, open any command line (or terminal) of your choice, enter:

redis-cli ping
PONG  # <-- response

You will get: PONGas response.

Why did we install Redis Server. Initially, Redis server will be used mainly for storing authentication tokens of logged-in users and ensuring they self-expire after a given time. Later on, Redis server will be used for caching the data of our contact for fast fetching.

Installing the Postman

Visit postman.com/downloads to download and install for your environment.

This concludes the installation and setup of our backend. In the next lesson, we will discuss why we chose AdonisJS for this project by highlighting its features and capabilities.