- Description
- How to setup the application
- Features
Django React.js news blog, which has various category of news like
- World
- Environment
- Technology
- Design
- Culture
- Business
- Politics
- Opinion
- Science
- Health
- Style
- Travel
-
First clone the repository by typing
git clone https://github.com/vivek92-tech/django_react_blog.git
-
Make sure you have install PostgreSQL and create a database with
CREATE DATABASE django_react_blog
owner postgres; -
Inside django_react_blog folder go to backend/django_react_blog/settings.py file, under database section change the postgres user password to your postgres user password.
-
Inside django_react_blog folder type
cd backend
then typesource venv/bin/activate
to activate the virtual environment -
To install dependencies, type
pip install django django-cors-headers django-summernote djangorestframework Pillow psycopg2 psycopg2-binary
-
Now type
python3 manage.py makemigrations
to check for changes and then typepython3 manage.py migrate
to migrate. -
Now create superuser by typing
python3 manage.py createsuperuser
and give username, email address and password. -
To run the server type
python3 manage.py runserver
-
Now, in your browser navigate to localhost:8000/admin/ and login as superuser
-
Now go to
Blog posts
option and selectADD BLOG POST
option and fill the details and save. Create multiple news blogs and make sure one of them is featured, by selectingFeatured
option. -
Finally, logout as superuser.
- Open a new terminal and go to django_react_blog folder and type
cd frontend
then typenpm install --save axios react-router-dom
to install the dependencies. - Now type
npm run start
to run the server and make sure the backend server is running. - Open your browser and type
localhost:3000
to go to the blog. - Finally, you can see all the django news blogs you have created in django admin.
- Thimbnail might be missing, so to solve that run
npm run build
- Now copy and replace the
build
folder fromfrontend
folder tobackend
- Now go to your browser and type
localhost:8000
and make sure your backend server is running. - You can see the completed version of the website.
- Landig page:
- Blog page:
- List of blogs
- Categorical view
- Detail View