Play the Game: Dealing with the Error
Learn how to make sure that the client loads and connects to the API.
We'll cover the following
The necessary steps
The following should be a review, but since the details are spread through multiple chapters, it may be helpful to see it outlined in one place.
- We need to choose whether we’ll be running this on SQLite or on Postgres. Here, we’ll choose Postgres, since it’s a slightly more complicated process. If we’re running Postgres, we might want to ensure that Postgres is running. In Mac, if we run the database using Homebrew, which we recommended, then we can check it using
brew
services list
. In Windows, we runservices.msc
to open up a graphical user interface that controls the services on the machine. We need to findpostgresql-x64-11 - PostgreSQL Server 11
in the list. When we click on it, and if it’s running, we get the option to stop, pause, or restart the service in the left panel. - We need to make sure the database is ready. In Postgres, we first need to create the database if it does not already exist. We can do this with
createdb langman
. In either case (Postgres or SQLite), we need to populate the “Usages” table with examples. We do that using the init-db script we defined in Build the Data Model. We first download theusages.csv
file and place it in thelangman/data
directory. Then we setFLASK_ENV
according to the databases we’re using and setFLASK_APP
toserver.prepare_orm
. After that, we callpipenv run flask init-db
. We verify that it’s working using the database REPL. - Next, we stand up the Flask API server. This is done from the
langman
directory by setting theFLASK_ENV
variable as in step 2. We actually don’t need to reset it within the same terminal once it’s set.We also setFLASK_APP
toserver.app
. Then we can run it using the Flask command:pipenv run flask run
. - Finally, we run the React client development server to load the React application into our browser. We run it by going to the
langman/client
directory and runningnpm start
. - We can then go to
0.0.0.0:3000
in our browser. Now, the client should load and connect to the API.
Now we’re good to go.
Get hands-on with 1200+ tech skills courses.