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.

  1. 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 run services.msc to open up a graphical user interface that controls the services on the machine. We need to find postgresql-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.
  2. 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 the usages.csv file and place it in the langman/data directory. Then we set FLASK_ENV according to the databases we’re using and set FLASK_APP to server.prepare_orm. After that, we call pipenv run flask init-db. We verify that it’s working using the database REPL.
  3. Next, we stand up the Flask API server. This is done from the langman directory by setting the FLASK_ENV variable as in step 2. We actually don’t need to reset it within the same terminal once it’s set.We also set FLASK_APP to server.app. Then we can run it using the Flask command: pipenv run flask run.
  4. 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 running npm start.
  5. 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.