Streamlining Web Development with Docker (Python+Django): A Step-by-Step Guide to Setting Up Your Development Environment — Step 1
For this series of posts, I will be documenting the steps necessary to build and showcase a working demo for the purpose of applying to a job position.
It’s generally recommended to first establish the project directory structure before proceeding with the Docker setup. Defining the directory structure helps organize your project files and allows you to easily map them into the Docker container.
- Define the project directory structure: Determine how you want to structure your project files. Create the necessary directories, such as `backend` for Django files and `frontend` for React files, along with any other directories that align with your project’s organization.
- Set up the project files: Create the essential files required for your project, such as `requirements.txt` for Python dependencies and `package.json` for Node.js dependencies.
- Configure the project files: Customize the configuration files based on your project’s requirements. For example, update Django settings, set up the React build configuration, or define the necessary scripts in `package.json`.
- Create the Dockerfile: Once you have the project directory structure and essential files in place, you can create the Dockerfile in the project’s root directory. Specify the Docker image configuration, including the base image, installation instructions for dependencies, and copying project files into the container.
- Build and run the Docker container: With the Dockerfile ready, build the Docker image and run a container based on that image.
By following this order, you establish a clear project structure, set up the required files, and then encapsulate the environment using Docker. This approach allows for easier mapping of files and directories into the Docker container, ensuring smooth integration of your project with the Docker environment.
myapp
├── backend
│ ├── Dockerfile
│ ├── manage.py
│ ├── myapp
│ │ ├── __init__.py
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ └── requirements.txt
└── frontend
├── Dockerfile
├── public
│ ├── index.html
│ └── favicon.ico
├── src
│ ├── App.js
│ ├── index.js
│ └── components
│ ├── Header.js
│ └── Footer.js
├── package.json
└── package-lock.json
In this example, the project directory is named myapp. It contains two main directories: backend and frontend. The backend directory holds Django-related files, including manage.py and the main Django app directory (myapp). The frontend directory contains React-related files, such as the public directory for static assets and the src directory for source code. The React components are placed under the src/components directory.
Build and run the Docker container:
- Open a terminal or command prompt.
- Navigate to the directory containing the Dockerfile and project files.
- Build the Docker image using the following command:
> docker build -t myapp-backend -f Dockerfile.backend .
Replace `myapp-backend` with a suitable name for your backend image. The `-f` flag specifies the Dockerfile to use, in this case, `Dockerfile.backend`. The `.` at the end specifies the build context.
4. Once the backend image is built successfully, you can build the frontend image using a similar command:
> docker build -t myapp-frontend -f Dockerfile.frontend .
Replace `myapp-frontend` with an appropriate name for your frontend image. Use the `-f` flag to specify the frontend Dockerfile, `Dockerfile.frontend`.
5. After both the backend and frontend images are built, you can run the containers.
For the backend container, use the following command:
> docker run -d -p 8000:8000 — name myapp-backend-container myapp-backend
This command starts the backend container in detached mode (`-d`), maps port 8000 from the container to port 8000 on the host machine (`-p 8000:8000`), and assigns a name to the container (` — name myapp-backend-container`).
For the frontend container, use a similar command:
> docker run -d -p 3000:3000 — name myapp-frontend-container myapp-frontend
This command starts the frontend container in detached mode, maps port 3000 from the container to port 3000 on the host machine, and assigns a name to the container.
6. With both containers running, you can access your application by visiting the respective URLs:
Backend: http://localhost:8000
Frontend: http://localhost:3000
The backend and frontend containers are now up and running, allowing you to interact with your web application.
Remember to customize the image and container names (`myapp-backend`, `myapp-frontend`, `myapp-backend-container`, `myapp-frontend-container`) to suit your project’s naming conventions.
You may find the following script useful for bootstrapping a new app.
Next Steps
To create a working example that meets the given requirements, you can develop a web application using Python, Django, React, and the specified additional technologies. Here’s a step-by-step guide:
2. Define the project scope: Determine the purpose and functionality of your web application. For example, you could create a task management application where users can create, assign, and track tasks.
3. Create the backend using Python, Django, and Django REST Framework:
— Set up a Django project and create the necessary Django models, views, and URLs.
— Implement the RESTful API endpoints using Django REST Framework to handle CRUD operations for tasks.
— Ensure the code follows best practices, is well-documented, and is testable.
4. Develop the frontend using React:
— Set up a React project using tools like Create React App.
— Create React components for displaying and managing tasks.
— Integrate the frontend with the backend API endpoints to fetch and update task data.
— Use React Router for navigation between different views.
5. Implement additional technologies:
— Integrate AgGrid for displaying tabular data, such as a list of skills.
— Utilize Bulma or Sass for styling the user interface, ensuring a clean and modern design.
— Incorporate React Testing Library for unit testing your React components.
6. Ensure code quality and documentation:
— Follow best practices for writing clean, maintainable code.
— Include comments and documentation to explain the code’s functionality and usage.
— Write unit tests using React Testing Library and Django’s testing framework to ensure the code is well-tested.
7. Deploy the application:
— Host your web application on a server or cloud platform like Heroku or AWS.
— Set up a CI/CD pipeline to automate the deployment process whenever changes are pushed to your code repository.
8. Prepare the demo:
— Create a presentation or a demo video showcasing the features and functionality of your web application.
— Emphasize how you’ve incorporated the specified technologies and highlight any business-critical features you’ve implemented.
— Clearly communicate complex concepts and demonstrate your ability to build scalable and maintainable web applications.
Remember to adapt and customize the example based on your specific job application requirements and preferences.
