Aug 8, 2021
Web Application using Django. Part 3(a)
In part 1 of the series, we saw, how to create a django project, apps within the project and created our back-end section with models, serializers, API views and API endpoints. Then in part 2, we saw, how to add authentication to our back-end and Sign-Up/Sign-In/Sign-Out functionality to add users.
In this first half of the final part, we will see how we can configure our application to support one of the most popular front-end frameworks, React.
If you haven’t checked out part 1 and 2 of the series, visit the links below,
Let’s begin,
Part 1.
- In the command prompt, within the root folder, run:
pipenv shell 2. Then, within the project folder i.e the upper messagemanager folder, run:
python manage.py startapp frontendThis will create a ‘frontend’ app within the project folder.
3. Open up the root folder in a code editor, then within the lower messagemanager folder, inside settings.py file, under ‘INSTALLED_APPS’ add ‘frontend’ .
Part 2.
- The structure of the frontend folder should be:
Create the necessary folders according to the diagram, within the frontend folder.
2. Next, in the command prompt, within the project folder, initialize the npm as:
npm init –y3. Then, run:
npm install --save-dev webpack webpack-cli4. Till now, we weren’t concerned with version controlling, but now the time has come to initialize a git repository for our project. So in the command prompt, within the project folder run:
git initThis will create an empty git repository for our project. Then, create a .gitignore file inside the project folder and add default files from https://www.toptal.com/developers/gitignore for django.
5. Again, in the command prompt, run:
npm install –-save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-propertiesEven though Django provides us with default HTML templates for our front-end, we will be using React to create the front-end. As a result, there are certain dependencies and modules that we need to install and create certain configuration files to integrate React to our django application.
6. Finally, run:
npm install react react-dom This will install react and the react-dom for our front-end.
7. Now within the project folder, create a file .babelrc and add:
{"presets": ["@babel/preset-env", "@babel/preset-react"],"plugins": ["babel-plugin-transform-class-properties"]}
8. To use the babel-loader that we installed previously, create a webpack.config.js file within the project folder and add:
const path = require("path");module.exports= { entry: './frontend/src/index.js', output:{ path: path.resolve(__dirname, "./frontend/static/frontend"), filename: "[name].js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use:{ loader: "babel-loader" } } ] }}
9. We need to have scripts to compile and run our frontend app. So, in the package.json file, add:
"scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production"},
Part 3.
- Within the frontend folder → src folder, create index.js file and add:
import App from './components/App';2. Inside src/components folder, create App.js file and add:
import React,{Component, Fragment} from "react";import ReactDOM from 'react-dom';class App extends Component{ render(){ return(<h1>App</h1>); }}ReactDOM.render(<App />, document.getElementById('app'));
3. Then, in the templates/frontend folder, create an index.html file and add:
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]> <html class="no-js"> <!--<![endif]--><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Message Manager</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://bootswatch.com/4/cosmo /bootstrap.min.css"> </head> <body> <div id="app"></div> {% load static %} <script src="{% static "frontend/main.js" %}"></script> </body></html>
4. To display the html, in the views.py file of the frontend folder, add:
from django.shortcuts import renderdef index(request):return render(request, 'frontend/index.html')
5. Connect the view with the url in urls.py file as:
from django.urls import pathfrom . import viewsurlpatterns = [ path('', views.index)]
Finally, include the ‘frontend.urls’ in the urls.py file of the lower messagemanager folder.
So we have configured our application to support React framework and all that remains is to build the frontend app with the necessary components and middleware like Redux to be able to communicate with the models in the back-end.
Happy coding!
