+

How to set up

Lucaren

React-Django Project

profile
Breshly Abanid ยท Follow | |
Hey guys, I made this step-by-step guide on how to set up the project. From installing dependencies to configuring Django and integrating it to React. I hope you find it helpful and easy to understand. Lezz goooo! (bitaw sunda lng ni guys.)
+

  1. Download project or clone repository

    • First go to the project repository to download the project. Click here: Project repository

    • Or you can clone the project by using git clone.

      git clone https://github.com/breshlyabanid22/Lucaren.git

  2. Installations and Configurations

    • Backend Installations:

      First, let's activate our virtual environment.

      1. Go to your backend directory. Then activate virtual env.
        2. venv\Scripts\activate.bat
      2. Now, install the dependencies: djangorestframework, django-cors-headers, mysqlclient and Pillow.
        3. pip install djangorestframework 
        pip install django-cors-headers 
        pip install mysqlclient 
        pip install Pillow
      3. You can check the dependencies installed usingpip freezecommand.
        4. pip freeze
    • Now that our virtual environment is activated, it's time to tweak our settings.py and configure our default database settings for this project.

      Settings.py Configuration:

      1. Inside the backend folder, go to settings.py.

        vs code snippet

      2. Scroll down and look for the DATABASEconfiguration as shown in the image below.

        vs code snippet
        For this project, we're going to use mysql for our default database. Change the values of NAME, USER, PASSWORD, HOST, PORT base on your mysql user settings.

      3. Next, scroll down to MEDIA_ROOT, and change the value to your actual local root folder

        vs code snippet

        You can do this by right-clicking on the media folder and click Copy Path.

        vs code snippet vs code snippet

    • Frontend Installations

      Let's install the dependencies.

      npm install axios react-router-dom react-bootstrap bootstrap -D tailwindcss postcss autoprefixer
      You can install multiple dependencies in one line like this.

  3. Run the project

      Now that we've finished our set up, let's run the project.
      1. First, open your web server to start our database. In my case, I'm using XAMPP.
        2. xampp
        Start Apache and MySQL. Make sure you have a database named 'lucaren' in your mysql.
      2. Next, open two command prompts in your development environment for frontend and backend.
        3. da
        Note: To run the django server you should be in the backend directory.
        da
        Note: To run the react server you should be in the frontend directory.
      3. Let's run the django server.
        4. But first, we have to migrate our changes made in settings.py using these command lines.

        You have to make migrations first using: 

        py manage.py makemigrations

        Then migrate:

        py manage.py migrate

        Now, let's run the django server using the command line:

        py manage.py runserver
      4. Finally, let's run the react server in the fronted directory/folder.
        5. Run the server using: 'npm run dev'
        npm run dev
      5. Go to the localhost:5173 and now it should be up and running.
        6. Lezzz goooooo!..

  4. How to Re-run the project

+

+