Developing a Single Page Application using React and Django
Hello guys, in this post I'll share my experience about how I developed a simple todo application that has backend written using Django framework(with Mysql database) and front end written using React JS.
The application is used to maintain the todolists of the registered users and each list has some items.
The application supports basic CRUD operations on the list and item objects.We developed a Mentor App using django framework class during MRND summer course.Here is the working of it.
The todoapp project was given as homework during Mission RND program 2019. Almost everyone developed this application but I have tried to integrate React Js with Django both as seperate applications.
Some features of my project are:
1. The application uses JSON Web Token authentication to authenticate the users.
2. Django Rest framework has been used to send data from backend to frontend with the help of serializers.
3. ReactStrap is used at some places to beautify the User Interface.
4. The application is a single page application where every component is rendered on the same page without redirection.
I started development of this application with backend. To begin with , the first thing I did was creation of models.After the models were created I registered them and wrote function based views for the models.I added templates to the application,rendered the templates and I was able to achieve below functionality:
1. Performing CRUD operations on lists and items.
2.Achieving per user scope view(that is the user who is logged in should only be able to view his lists).
3.Authentication of the users.
4.Allowing authorized users.
5. After logging into the application the user should not be able to go back to login page(redirecting user to home when he is logged in).
But I was not happy because there was nothing new I was learning. I thought to create the frontend using React JS.When I started browsing I got to know that I can develop a single page application . I proceeded with creating react app by following this github link.The first major issue I faced was while doing npm start after successful creation of react app that was npm start never seemed to start. I tried all possible ways : removed all node modules and reinstalled, tried to remove package.json ,checked whether there any applications already running on port 3000 etc. and many more trials which resulted in 6 hours of frustration only to realise later that it was a dependency issue with web-pack dev server and the improperly set path variables which was stopping react app from starting.
I started with creating normal components to display the lists and items. I made fetch calls to get the lists. Using serializers,views in rest framework I was able to generate the JSON data. The next big problem came in my way when I was clicking on a particular list object it didn't show me related items. I kept trying for hours together (Idk why the event handlers are my enemies :P) .Atlast when the event handler was binded in constructor it worked .
Now after the GET method (Read operation) was done I was pending with POST,PUT and DELETE methods. I thought of adding modal forms for adding a new element(Create operation) . Here also I faced the similar issue as above where the event handler was not working properly. Lastly I figured out the issue that I used wrong attribute for the modal form to open(Reactstrap docs were old one which I referred and KC sir's gyaan helped here when he said go to the code and check). This is the latest docs if you want to refer:https://reactstrap.github.io/components/alerts/.
Last part was adding authentication to the application in order to achieve per user scoping .I used Json Web Token authentication . For the purpose of authentication I used Rest Framework's Authentication classes.
The headache here I got was while adding custom header values in the http requests I was making. I kept getting the error which said "Undefined id in Access Control Allow Headers in preflight response". This means that there is some field named id in your request header which is not being responded properly by backend. Figuring out where to allow this header was an exciting part . It has to be set in settings.py of your project by adding it to the CORS_ALLOW_HEADERS list.
Finally after the entire functionality was achieved I modified my User Interface to make it appealing to the user. The end product looks something like this :
The best part of developing this application was using the knowledge of debugging from MRND summer camp to fix the bugs and get this working.It took me around a week to complete backend and another week for frontend.
Here is the link to the code:
https://github.com/blackjackal982/summer2019_smec_saisirisha/tree/master/homeproject
Reference for JWT authentication:
https://medium.com/@dakota.lillie/django-react-jwt-authentication-5015ee00ef9a
Signing Off,
Sai Sirisha
The application is used to maintain the todolists of the registered users and each list has some items.
The application supports basic CRUD operations on the list and item objects.We developed a Mentor App using django framework class during MRND summer course.Here is the working of it.
The todoapp project was given as homework during Mission RND program 2019. Almost everyone developed this application but I have tried to integrate React Js with Django both as seperate applications.
Some features of my project are:
1. The application uses JSON Web Token authentication to authenticate the users.
2. Django Rest framework has been used to send data from backend to frontend with the help of serializers.
3. ReactStrap is used at some places to beautify the User Interface.
4. The application is a single page application where every component is rendered on the same page without redirection.
I started development of this application with backend. To begin with , the first thing I did was creation of models.After the models were created I registered them and wrote function based views for the models.I added templates to the application,rendered the templates and I was able to achieve below functionality:
1. Performing CRUD operations on lists and items.
2.Achieving per user scope view(that is the user who is logged in should only be able to view his lists).
3.Authentication of the users.
4.Allowing authorized users.
5. After logging into the application the user should not be able to go back to login page(redirecting user to home when he is logged in).
But I was not happy because there was nothing new I was learning. I thought to create the frontend using React JS.When I started browsing I got to know that I can develop a single page application . I proceeded with creating react app by following this github link.The first major issue I faced was while doing npm start after successful creation of react app that was npm start never seemed to start. I tried all possible ways : removed all node modules and reinstalled, tried to remove package.json ,checked whether there any applications already running on port 3000 etc. and many more trials which resulted in 6 hours of frustration only to realise later that it was a dependency issue with web-pack dev server and the improperly set path variables which was stopping react app from starting.
I started with creating normal components to display the lists and items. I made fetch calls to get the lists. Using serializers,views in rest framework I was able to generate the JSON data. The next big problem came in my way when I was clicking on a particular list object it didn't show me related items. I kept trying for hours together (Idk why the event handlers are my enemies :P) .Atlast when the event handler was binded in constructor it worked .
Now after the GET method (Read operation) was done I was pending with POST,PUT and DELETE methods. I thought of adding modal forms for adding a new element(Create operation) . Here also I faced the similar issue as above where the event handler was not working properly. Lastly I figured out the issue that I used wrong attribute for the modal form to open(Reactstrap docs were old one which I referred and KC sir's gyaan helped here when he said go to the code and check). This is the latest docs if you want to refer:https://reactstrap.github.io/components/alerts/.
Last part was adding authentication to the application in order to achieve per user scoping .I used Json Web Token authentication . For the purpose of authentication I used Rest Framework's Authentication classes.
The headache here I got was while adding custom header values in the http requests I was making. I kept getting the error which said "Undefined id in Access Control Allow Headers in preflight response". This means that there is some field named id in your request header which is not being responded properly by backend. Figuring out where to allow this header was an exciting part . It has to be set in settings.py of your project by adding it to the CORS_ALLOW_HEADERS list.
Finally after the entire functionality was achieved I modified my User Interface to make it appealing to the user. The end product looks something like this :
The best part of developing this application was using the knowledge of debugging from MRND summer camp to fix the bugs and get this working.It took me around a week to complete backend and another week for frontend.
Here is the link to the code:
https://github.com/blackjackal982/summer2019_smec_saisirisha/tree/master/homeproject
Reference for JWT authentication:
https://medium.com/@dakota.lillie/django-react-jwt-authentication-5015ee00ef9a
Signing Off,
Sai Sirisha
Comments
Post a Comment