INFT3050 Lab, Week 6/7
Here’s a rough guide to getting your React front-end connected to our back-end and database. Remember - this will take time and testing to get it working properly do not leave this task until the last minute!
Introduction
There are five (5) basic steps to what we are trying to do here:
1. Students will take the inft3050_2025_v1.0.zip and decompress (unzip) it on their machine
2. Students will install Docker Desktop
3. From a command prompt, in that folder, run ’docker compose up -d’
4. That will expose the REST API
5. You will need to use a HTTP header to authenticate on every call
We will go through these instructions in this document - please be sure to download all of the appropriate files from Canvas.
We have also created a Postman collection which contains ALL the possible API calls, and there are heaps, as nocodb which creates an endpoint for everything. Students can use this Postman collection to test calls to the server.
Part 1 – Docker
Our server-side API is built using a combination of Microsoft SQL and NocoDB.
You will need Docker Desktop installed to be able to run the server-side API on your local machine. Please follow the instructions from https://docs.docker.com/desktop/ under the “Install Docker Desktop” section for your relevant Operating System.
To confirm Docker Desktop is running you should be able to start it and see a screen similar to this one below.
Part 2 – Starting the Server
Download the ZIP (inft3050_2025_v1.0.zip) associated with this workshop. It contains a number of items including:
1. A compose.yml file which tells Docker how to execute MSSQL and NocoDB
2. A copy of our course database
3. A copy of the NocoDB database, all pre-configured and ready to go
4. A README with the basic steps
Take this ZIP and decompress it on your local machine. Open a Command Prompt or Terminal, and from within that folder run the following command
docker compose up -d
Give it a few moments to start. Once everything is running, back in the Docker Desktop application, you should be able to see two containers running as per the screenshot below.
When both the noco-1 and db-1 containers are “green”, you are good to proceed.
Part 3 – Postman
Postman is a developer utility used to explore APIs. We have created a Postman “collection” which contains all the API endpoints you will need to interact with the course database.
You can download and install Postman from https://www.postman.com/downloads/
You will need to make an account (please only use the free version and please use your student email address). Then you will be able to import from a local file (not a URL).
Once you have it running you can “Import” the JSON file found in Canvas to create a new collection. It should look like the screenshot below once imported.
You will need to set the API Token in Postman. This token is what is used for authentication to the backend server. The token is inserted as a HTTP header on ALL calls to the server. Under the variables tab, where you see apiKey, ensure the following value is configured.
sPi8tSXBw3BgursDPmfAJz8B3mPaHA6FQ9PWZYJZ
To test that Postman can communicate with your running server, select the POST login request from the left-hand tree and click the “Send” button. You should get a successful response as per the screenshot below.
DON’T FORGET - to unselect all attributes in Postman - otherwise you will get no data!
Part 4 - Connecting from React
You will want to use the Axios library to make HTTP calls from your React front-end to this server-side API backend.
https://www.npmjs.com/package/axios provides some guidance on using this library. You can see the various URLs that are being called from the Postman collection above.
Remember that calls to retrieve data will use a HTTP GET request. Calls to create data will use a HTTP POST request. ALL requests require the xc-token HTTP header to be included.
Part 5 - Testing your connection to React to display data in your front-end
Below are a couple of samples from the lecture that might help you retrieve data - though tweaking will be required to fit your specific set-up.
Sample raw JavaScript
const myHeaders = new Headers();
myHeaders.append("Accept", "application/json");
const requestOptions = {
method: "GET",
headers: myHeaders,
redirect: "follow"
};
fetch("http://localhost:3001/api/inft3050/BookGenre", requestOptions)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.error(error));
A Sample React code set
const headers = {
'Accept': 'application/json'
};
axios.get("http://localhost:3001/api/inft3050/BookGenre", {
headers: headers
})
.then((response) => { console.log(response);
})
.catch((error) => { console.log(error);
});