We won't be working directly with MySQL for this project (that's what using a Django backend is for) but it's still useful to be able to run a local server to test databases.
For Windows users, I had success using the following tutorial: https://www.lifewire.com/how-to-install-mysql-windows-10-4584021
For Mac users, try this link and let me know how that goes: https://www.geeksforgeeks.org/how-to-install-mysql-on-macos/
Generally, they'll ask you to setup a username and password. Since we're testing locally, security doesn't matter that much. I chose the username as root and the password as root.
In our codebase, we've specified that our database be called celesta_data, but you'll still need to explicitly create your own database using MySQL. I used HeidiSQL (see below) to set up for the first time, but if you're on Mac or you don't want to use HeidiSQL, simply open up a MySQL terminal and type in:
mysql> CREATE DATABASE celesta_data;
If you're on Windows and want to perform a deep-dive into the database, you can download MariaDB from https://downloads.mariadb.org/mariadb/10.1.41/ (this is an older version copied from the previous development guide that I have installed. Feel free to use a newer version).
- Set the password to “root” and check “use UTF8”
- Leave everything in the next screen default
- After installation, run “MySQL Client (MariaDB 10.1 (x64))” and login
- You can use HeidiSQL (installed with MariaDB) to view the contents of the database
If you're testing for the very first time, then you'll be starting off with an empty database. As you add to the database, they'll get saved in the MySQL server to be used again and again! We each have our own copy of the server on our computer, so at this point we are not sharing data.
Within VSCode, make sure your virtual environment is up and running (see the README if you forgot how to do that). Then type in the terminal:
python manage.py runserver
Once the server is up and running, navigate to http://127.0.0.1:8000/api/students/. This is where the database entries are stored. I have a few dummy data in my own local server already (see below), but you can add your own using the UI in the bottom half of the screen. In the future, a complete dummy database will likely be created for all of us to use and test.
If you want to view a particular entry, just navigate to http://127.0.0.1:8000/api/students/{id}. For example, Heidi's entry would be http://127.0.0.1:8000/api/students/1
In VSCode, open a new terminal (while keeping the first terminal running!). You can open a new terminal in the top-right of the terminal window near the bottom of the screen.
Note: I'm currently using the Axios package for the HTTP requests. You'll need to type in the terminal npm i axios to install that package.
As we have done before, navigate to the frontend folder cd frontend and run npm start. Once the frontend is built (it'll take a few moments), you can navigate to http://localhost:3000/ and view the beautiful results.