Skip to content

Local Setup Instructions

Jump to bottom
Prasad Honrao edited this page Oct 25, 2024 · 1 revision

This document provides detailed instructions on setting up the DevCamper project locally on your machine. The project consists of two main components: the API server and the front-end UI. The API server is built using Node.js and Express, while the front-end UI is developed using React. By following the steps outlined in this guide, you will be able to run both components locally and interact with the application.

Prerequisites

Before you begin setting up the DevCamper project, ensure that you have the following prerequisites in place:

Geocoder API Key

To enable location-based features in the DevCamper application, you'll need to integrate a geocoding service. The recommended provider for this is MapQuest. Follow the steps below to get started:

  1. Sign Up for MapQuest:

    • Visit the MapQuest Developer Portal and click on the "Sign Up" button.
    • Fill out the required fields to create your free account. You may be asked to verify your email address.

  2. Create a New Application:

    • Once you’ve logged into your MapQuest account, navigate to the "Applications" section of the dashboard.
    • Click on "Create a New Application." Here, you’ll need to provide a name and a brief description of your application.
    • After creating your application, you will be presented with an API key. This key is vital for making requests to the geocoding service and should be kept secure.

Setup SMTP Service

To facilitate email communication (such as notifications, confirmations, etc.) within the application, you will need to set up an SMTP service. We recommend using Mailtrap for testing purposes:

  1. Sign Up for Mailtrap:

    • Go to Mailtrap and click on the "Sign Up" button to create a free account.
    • Fill in your details and verify your email address to complete the registration process.

  2. Create a New Inbox:

    • Once logged in, you will be taken to your Mailtrap dashboard. Here, click on "Create New Inbox."
    • This will generate SMTP credentials that include the host, port, username, and password. These credentials will be used in your application to send emails securely.

Install NodeJS

To run the DevCamper project, you need to have Node.js installed on your machine. If you don't have Node.js installed, you can download it from the official website: Node.js Downloads.

MongoDB Server

The DevCamper project uses MongoDB as the database to store bootcamps, courses, users, and other data. Follow the steps below to set up MongoDB on your local machine:

  1. Download MongoDB Community Server:

    • Visit the MongoDB Download Center and download the MongoDB Community Server for your operating system.
    • Follow the installation instructions provided on the website to install MongoDB on your machine.

  2. Start MongoDB Server:

    • Once MongoDB is installed, you need to start the MongoDB server. The exact steps to start the server may vary depending on your operating system.

    • For most systems, you can start the MongoDB server by running the following command in your terminal or command prompt:

      mongod

    • If you encounter any issues starting the MongoDB server, refer to the MongoDB documentation for troubleshooting tips.

Project Setup

To get started with the DevCamper project, you need to clone the project repository from GitHub. Open your terminal or command prompt and run the following commands:

git clone https://github.com/prasadhonrao/devcamper

Web API Setup

Navigate to the api directory inside the cloned repository:

cd devcamper/api

Install Dependencies

Once inside the api directory, run the following command to install the necessary dependencies for the API server:

npm install

This will download all the packages listed in the package.json file.

Configure Environment Variables

Create a .env file in the root of the api directory and add the following environment variables. Replace the placeholders with your actual values:

# Server configuration
port=5000
node_env=development

# Database configuration
mongodb_host=localhost
mongodb_port=27017
mongodb_username=''  # Leave empty if you are not using authentication
mongodb_password=''  # Leave empty if you are not using authentication
mongodb_db_name=devcamper-db
mongodb_db_param=''  # Additional parameters if required

# Geocoder configuration
geocoder_provider=mapquest
geocoder_api_key=<your_api_key>  # Get your API key from https://developer.mapquest.com/

# File upload configuration
file_upload_path=./public/uploads
max_file_upload=1000000  # Maximum file upload size in bytes

# JWT configuration
jwt_secret=<your_secret>  # The secure key generated in Step 5
jwt_expire=30d  # JWT expiration time
jwt_cookie_expire=30  # Expiration time for cookies in days

# Email configuration
smtp_host=<host_name>  # Example: smtp.mailtrap.io
smtp_port=<host_port>  # Example: 2525
smtp_email=<your_email>  # Your Mailtrap email
smtp_password=<your_password>  # Your Mailtrap password
from_email=<your_email>  # Email address to send emails from
from_name=<your_name>  # Name to display in the sender field

# Rate limiting configuration
rate_limit_window=100
rate_limit_max=1000

Seed the Database

Run the following command to seed the database with bootcamps, courses, and users.

node run data:import

Validate the Data in MongoDB Compass

  1. Open MongoDB Compass and connect
  2. Select the devcamper-db database
  3. Verify that the bootcamps, courses, and users collections have been created and populated with data.

Start the API Server

To start the API server in development mode, run:

npm run dev

For production mode, run:

npm start

Cleanup the Database

Run the following command to delete all data from the database. This will remove all bootcamps, courses, and users.

node run data:delete

Once the server starts successfully, it should be accessible at http://localhost:5000.

Web App Setup

Navigate to the ui directory inside the cloned repository:

cd devcamper/ui

Install UI Dependencies

To install the necessary dependencies for the front-end UI, run the following command:

npm install

This command will download all the packages listed in the package.json file, which are required to run the UI.

Configure API Endpoint

Before starting the UI, you need to configure the API endpoint that the front-end application will communicate with. Open the .env file (or create one if it doesn't exist) in the root of the ui directory and add the following variable:

REACT_APP_DEVCAMPER_BASE_API_URI=http://localhost:5000/api/v1

Make sure to replace http://localhost:5000 with the actual URL of your API if it differs.

Start the UI Development Server

To run the front-end application in development mode, use the following command:

npm start

This command will start the React development server, and the application should automatically open in your default web browser at http://localhost:3000.

Verify the Setup

Once the UI is running, verify that it can communicate with the API. You can do this by checking if the application displays data fetched from the API. If everything is configured correctly, you should see the bootcamp listings or any other relevant data.

Clone this wiki locally