This is the Lab Asset Management System (LabAMS) Application . It is a simple web app that keeps track of the users and tools in a reaserch lab. The webapp has a Flask(Python) and MongoDB backend with a ReactJS frontend that allows the user to do simple CRUD operations.
Below is a link to the LabAMS GitHub page if you downloaded this project from elsewhere.
https://github.com/gabebohlmann/web-development/tree/main/LabAMS
- Install a text editor or IDE of your choosing, VS Code is recommended.
- Install the necessary technologies and frameworks. This project requires Python, Node.js, and MongoDB to be installed. All package installs are covered in the guide below.
-
Start your MongoDB server. The method for doing this can vary depending on your operating system.
- On windows it is recommended to use MongoDB compass and connect to the default URI
mongodb://localhost:27017
- On windows it is recommended to use MongoDB compass and connect to the default URI
-
Clone the web-development repository to your local machine. Open terminal/cmd and run:
git clone https://github.com/gabebohlmann/web-development.git -
Navigate to the Flask backend directory:
cd "your_directory/web-development/LabAMS/backend" -
Set up a virtual environment and activate it:
For Mac and Linux
python -m venv venv source venv/bin/activateFor Windows
python -m venv venv venv\Scripts\activate -
Install the required Python dependencies from
requirements.txt:pip install -r requirements.txt -
(optional: wsgi.py makes an env variable unneccessary) Set the FLASK_APP environment variable:
For Mac and Linux
export FLASK_APP=backendFor Windows
set FLASK_APP=backend -
Ensure your Flask backend is set up to connect to your running MongoDB server. In LabAMS/backend/init.py the URI is set to
"mongodb://localhost:27017"by default and the database name is"LabAMS_DB" -
Run the Flask server:
flask runThis will start the Flask server on http://localhost:5000.
-
Open http://localhost:5000 in your browser. Click on the users and assets links. You should be directed to a page with just two []. This is not an error, it is just showing that your MongoDB database is empty. We will now add data to our database. In MongoDB compass add a database named
LabAMS_DBwith a collection namedusers. Click on the users collection when it is created and go toADD DATAand thenImport JSON or CSV filefrom here you should select theusers.jsonfile in theLabAMS/backend/databasefolder. Repeat the same process to add the data fromassets.jsoninto the MongoDB database. Reload http://localhost:5000 and the users and assets data should now appear.
-
Open a new terminal/cmd window and navigate to the React frontend directory:
cd "your_directory/web-development/LabAMS/frontend" -
Install the required npm packages:
npm install -
Run the React application:
npm startThis will start the frontend react application on http://localhost:3000. You can now interact with the LabAMS app from this page.