We will bundle our application with webpack and we will not use create-react-app boilerplate
Create React App from Scratch
Step - 1: Configuring development environment
(Note: if you already installed the node, you can skip this part)
We will use Node backend for the development environment.
Therefore we need to install Node and Node package manager npm. In order to prevent possible dependency problems, we will create a clean node environment.
I will use NVM which is a Node version manager and it allows us to create isolated Node environments.
In your terminal, run the code below.
Now we can create a frontend directory in the Django project.
Go to the root directory of the project. 'backend/'
In your terminal copy and paste the code.
If everything goes well, we can create necessary files.
All npm packages contain a file that holds metadata about the app. This file is a package.json file.
You should update the package.json file.
Edit the scripts section and add Babel presets and postcss configurations.
Step 2 - Webpack configuration and index.html file
What is webpack ?
Webpack is a module bundler and a task runner.
Because of the rich plugins, you can also do many things with Webpack like compressing with different algorithms, eliminate unused CSS code, extracting your CSS to different files, uploading your bundle to cloud providers like S3, etc…
I made two different Webpack settings in one file.
One is for the development environment, and the other one is for a production environment.
Also, note that we do not optimize these configurations.
Copy/Paste the following code into webpack.config.js file.
Also, when we build our code for production (bundling), Webpack will use this HTML as a template.
It is important to say that Django will not use this HTML file. This is the HTML entry point of webpack. __Django will use the output of the webpack bundle__.
Update your index.html file.
Step - 3 Create the React app
The index file is the root file of our app, meaning that all our codes will be connected to this root file.
The other tutorials or each boilerplate use this file for only render function of ReactDOM and leave it small and clear.
Writing this index file as it is is a totally a choice.
What we will do is as follows: We will create an Init component that will initialize the API framework (Apollo) and routing library (react-router-dom).
We will wrap our App.js file with the API framework so that all our components will be in the context of API.
The Apollo Provider expects an Apollo client.
The Apollo client has the information of the requested address, which is the address of our Django server.
After then we will wrap our App file again with the router component, namely Browser Router. This makes our app a single-page-application.
Thus, we make routing without rendering all the pages when the URL of the address bar changes.
At the end of the file, you will see the render function of ReactDOM which accepts our root component, which is the Init component in our case, and the DOM element that our app will be rendered in there.
Update your index.js file as follows.
Now, we are ready to create our simple movie app.
Our app has two different screens:
- The main page which lists all movies in the database with less information
- The movie page will show a specific movie page with more information.
Now update your App.js file.
Let me explain what that code means
When a user first opens our page, the switch component from react-router-dom will look at the URL. Then try to match the path of route components with this URL, if any, then the matched component in the route will be rendered.
Step - 4 Create page components and styling
The MovieList component will be shown on the landing page. Copy/Paste to "MovieList.js" file.
MoviePage component will show more details than the list view but only information about a specific movie.
Copy and paste the code MoviePage.js file.
Add some styling: update App.css.
Finally, Start Django-React App
In the development environment, we will run two different servers.
One is the Django server for backend, and the other one is the Webpack server for frontend development.
In the production environment, We will only run one Django server as I promise.
Go to the root folder of the Django project. 'backend/'.
Execute the below command and make the Django server ready for frontend requests.
Open another terminal and go to FRONTEND directory. ‘backend/FRONTEND’
You will see those screens.
Django and React Successfully Integrated ✅
We created a simple single-page-application. Now, the last part of this tutorial will be made this app works seamlessly with our Django project.
Now you can stop the webpack server with the corresponding terminal screen.
The Final Part - Production Build of Django and React
Now, We can build our app for the production environment. Go to the FRONTEND directory and execute the build command.
Also, check the backend/templates folder and you will see other index.html files.
This is the HTML file that Django will use.
I made this graphic in order to show webpack bundling process and how our app will use output files.