Skip to main content

πŸ‘ Start the Application

You have two options to start the application.

Option 1: Run in a codespace​

By far, the easiest way to start the application is to run it in a codespace. A codespace is a cloud-hosted, containerized development environment that you can connect to from Visual Studio Code. It comes pre-configured with all the tools you need to build and run the application.

In the case of this application, you can even use the online IDE to edit the code and see the changes reflected in the running application.

Open the repository on the main branch.

To start the application in a codespace, click "Code." Then, look for the Codespaces tab. Click "Create Codespace on main." This will create a new codespace for you and start the application.

Create codespace button

Let it run for a few seconds as it prepares your environment. It will clone the repository, prepare the containers, and run the installation scripts. Once it's ready, you'll see an IDE, with a preview window that shows the running application.

note

Again, this might take a few minutes. It's a great time to grab a coffee. β˜•οΈ

The codespace
warning

Right now, you should see a big error message in the console, as we haven't configured the app yet. Don't worry, you'll get it up and running in a few minutes.

    ####### ######  ######  ####### ######
    #       #     # #     # #     # #     #
    #       #     # #     # #     # #     #
    #####   ######  ######  #     # ######
    #       #   #   #   #   #     # #   #
    #       #    #  #    #  #     # #    #
    ####### #     # #     # ####### #     #

Expose the server port​

To get the application working in that environment, there is one small change you need to make to the codespace. You need to expose the port where the server is running.

Look for the Ports tab at the bottom of the IDE.

The Ports tab

Once you click on the tab, you'll see a list of ports. Right-click on the port Server (5000) row. Then, select "Port Visibility" and "Public."

The Port Visibility menu

You'll see the text in the Visibility column change to Public.

That's it! You're now ready to move to the next section.

🦸 Option 2: Run locally​

If you prefer to run the application locally, you can do so by following these steps. Keep in mind that the following steps of this lab will be using the codespace, so you might need to adapt some of the commands.

info

During the lab, we will use GitHub Codespaces. These instructions are here just in case you can't use Codespaces or you really, really, really want a local installation.

First, clone the repository to your local machine.

git clone git@github.com:mongodb-developer/library-management-system.git

Then, change to the library-management-system directory.

cd library-management-system

Now, go to each of the client and server directories and install the dependencies.

cd client
npm install
cd ../server
npm install

Start the server application.

npm start

And, in another terminal window, start the client application.

cd client
npm start

You now have the client running on http://localhost:4200 and the server running on http://localhost:5000.