Steps to run this code locally

[vigneshs-dev]

Hi @desphixs , I have been following your Blog app tutorial using Django + React. I have completed almost 19 videos on that playlist. I am able to make API and Backend work perfectly. But the frontend React part is little complex for me as I am not aware of that totally. Can you please make steps to run this code locally in our system by just cloning this repository ?

[desphixs]

Hi there,

When you clone this application, there would be the frontend backend part, you need to spin up the server for each of these separately, for the Django app you need run the "pip install -r requirements.txt" and to run the server you need to run "python manage.py runserver" and for the react you need to install the packages also by running "yarn" after which you'll spin up the server by running "yarn dev"

After this your two applications should be connected and you can now visit localhost:3000 on your browser.

Let me know if you have any more questions

On Tue, Aug 20, 2024, 20:10 Vignesh S @.***> wrote:

Hi @desphixs https://github.com/desphixs , I have been following your Blog app tutorial using Django + React. I have completed almost 19 videos on that playlist. I am able to make API and Backend work perfectly. But the frontend React part is little complex for me as I am not aware of that totally. Can you please make steps to run this code locally in our system by just cloning this repository ?

— Reply to this email directly, view it on GitHub https://github.com/desphixs/Django-and-React-Blog/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQPNAU7OUAHCFMQAWL6AQBTZSOIDBAVCNFSM6AAAAABM2QX4R6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ3TMMZVGM3TOOI . You are receiving this because you were mentioned.Message ID: @.***>

[vigneshs-dev]

Hi @desphixs ,

1 -> git clone https://github.com/desphixs/Django-and-React-Blog.git
2 -> cd Django-and-React-Blog

Backend

1 -> cd backend
2 -> python -m venv venv
3 -> venv/Scripts/activate
4 -> pip install -r requirements.txt
5 -> py manage.py runserver    
  -> Error -> ModuleNotFoundError: No module named 'environs'
           -> To solve -> pip install environs
  -> Error -> environs.EnvError: Environment variable "SITE_URL" not set
           -> I don't know how to solve the last error.

In video tutorial, you have mentioned creating Superuser in Django, making migrations, migrate, etc., But in the steps you have mentioned nothing about that. Can you please full steps to run your Django + React Blog program to run locally in local system?

Frontend

1 -> npm install yarn --global
2 -> npm install vite --global
3 -> npm create vite@latest . -- --template react
  -> Selected -> Ignore files and continue 
4 -> yarn
5 -> yarn dev

After this step, I am able to run the frontend server. In that server, there is sample page running. Because App.jsx having the sample code only.

As I already told you, I have completed the Django part earlier. So, I made some changes in the App.jsx file and make the Django code which I have followed from your videos and made it run in the background, I am able to get almost 80 percent of the Blog webpage you have created. The main problem I faced during the time is, My Blog webpage is left aligned. I am not able to make it centre aligned.

Can you please provide steps to solve these probelms? Please provide clear steps to run your Blog code without editing any changes to the code which I have cloned from the GitHub.

[vigneshs-dev]

After doing some research, I commented out the env variables in settings.py file in backend folder. After that also I come through multiple errors.

?: (staticfiles.W004) The directory 'C:\Users\Vignesh\Vicky\AWS-SAM\Blog\Django-and-React-Blog\backend\static' in the STATICFILES_DIRS setting does not exist.

Please provide detailed steps to run your full code locally.

[desphixs]

Hi again, here is the step by step guide in detail

1. Clone the Repository

1. Clone the repository:

   git clone [<repository-url>](https://github.com/desphixs/Django-and-React-Blog.git)

2. Navigate into the project directory:

   cd path/to/project from your command prompt

2. Set Up the Django Backend

1. Navigate to the backend directory:

   cd backend

2. Create and activate a virtual environment:

   • Create the virtual environment:

     python -m venv venv

   • Activate the virtual environment:
     • On Windows:

       venv\Scripts\activate

     • On macOS/Linux:

       source venv/bin/activate

3. Install Django dependencies:

   pip install -r requirements.txt

4. Apply database migrations:

   python manage.py migrate

5. Create a superuser (if necessary):

   python manage.py createsuperuser

   • Follow the prompts to create the superuser account.

6. Run the Django development server:

   python manage.py runserver

   This will start the Django server on http://127.0.0.1:8000/ by default.

3. Optional: Login to Admin and Verify that the backend is working

4. Set Up the React Frontend

1. Navigate to the frontend directory:

   cd ../frontend

2. Install Node.js dependencies:

   npm install or yarn (This will install libraries needed to run the react project)

3. Run the React development server:

   npm run dev or yarn dev

   This will start the React server on http://localhost:5173/ (if using Vite) or http://localhost:3000/ (if using Create React App).

5. Configure CORS in Django

If your frontend and backend are running on different ports (which is typical), you'll need to handle CORS.

1. Install django-cors-headers:

   pip install django-cors-headers

2. Update settings.py in Django:

   Add 'corsheaders' to INSTALLED_APPS:

   INSTALLED_APPS = [
      ...,
      'corsheaders',
   ]

   Add CorsMiddleware to the top of MIDDLEWARE:

   MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      ...,
   ]

   Set CORS_ALLOWED_ORIGINS to include your frontend's URL:

   CORS_ALLOWED_ORIGINS = [
      "http://localhost:5173",  # Or http://localhost:3000 for CRA
   ]

6. Verify Everything is Working

• Django API: Visit http://localhost:8000/ to check if the Django API is running.
• React Frontend: Visit http://localhost:5173/ (or http://localhost:3000/ for CRA) to check if the React frontend is running.

[desphixs]

If you get any error, please paste the error message so I can take a look at it

[vigneshs-dev]

If you get any error, please paste the error message so I can take a look at it

Thanks. Will check once and get you back.

[vigneshs-dev]

Hi @desphixs ,

On the step - 4, I encounter the below error:

ModuleNotFoundError: No module named 'environs'

I solved that error using the below command:

pip install environs

After that, I continue from that step and received another error:

environs.EnvError: Environment variable "SITE_URL" not set

I don't know how to solve this error? Please guide me to solve this error.

I am able to run the frontend part without any problem till now.

Could you please run the implementation steps once in your system. From that you can get my problems on implementing your code. Really wonderful blog project. But I am not able to run that in my local system.

[Cheruiyot-Aaron]

Set urls like this. SITE_URL = env.str("SITE_URL", default="http://localhost:8000") Run if you encounter any error to do with storages pip install django-storages

[Cheruiyot-Aaron]

Hi @ vigneshs-dev Or set like this url SITE_URL=env("SITE_URL", default="http://localhost:8000") At least one should work on your environment