DEV Community

Creating an app with Docker Compose, Django, and Create React App

Craig Franklin on May 16, 2019

Final code for this tutorial if you want to skip the text, or get lost with some of the references, can be found on GitHub. Update: ohduran has cr...
Collapse
 
ebrahimzare profile image
Ebrahim Zare

Thanks for your useful tutorial
I have a problem when in frontend dockerization, I face to this error when I run the code: content not from webpack is served from /app/public. And the container will Exited, do you know how can I solve the problem?
Thanks

Collapse
 
englishcraig profile image
Craig Franklin

I cloned a fresh copy of the repo and was able to build and run the app without error. Since frontend is mostly Create React App boilerplate, which handles all the Webpack configuration, the source of the problem is hidden under all of CRA's magic.

Assuming you didn't eject CRA or move files into or out of public, it's possible that old packages are causing problems, as I haven't updated any of them since writing the post. Try updating CRA to the latest version.

Collapse
 
turtlewolf profile image
TurtleWolfe • Edited

issues/8688

This issue started with the v3.4.1 upgrade, I listed 5-6 ways from this thread on how to fix it, from pinning to the 3.4.0 version, changing docker-compose up to docker-compose run.. for now I've settled adding a terminal to my compose file, but someone else pointed out the reason they closed the terminal is it could be a security risk. Ultimately the issue is when docker has the server running it thinks it's completed the job and exits.

alt text

Collapse
 
ohduran profile image
ohduran

Hey Craig, fantastic tutorial here! I've used it as an inspiration for a cookiecutter that other people might find useful, let me know what you think: cookiecutter-react-django

Collapse
 
englishcraig profile image
Craig Franklin

That's really cool! When I get a minute, I'll update the post to link to your project as well. I imagine it will be a bit more convenient than cloning specific branches in the repo for the tutorial.

Collapse
 
hahnsangkim profile image
H. Kim • Edited

Hi Craig

Thank you for the tutorial. It scratches my back happily~. Appreciate it!
I have an issue while following your instructions. I installed axios in success and then after editing App.js according to the code in the end and tried to build as follows

docker-compose up --build

I got this error

frontend_1  | Starting the development server...
frontend_1  | 
frontend_1  | Failed to compile.
frontend_1  | 
frontend_1  | ./src/App.js
frontend_1  | Module not found: Can't resolve 'axios' in '/app/src'

Do you have any ideas about what's wrong and what I'm missing?
Thank you and I look forward to your feedback soon~

Collapse
 
hahnsangkim profile image
H. Kim

Never mind. I forgot to uncomment lines in Dockerfile within frontend.
Afterward, it works.

Collapse
 
xor0831 profile image
Daniel Soriano

Heroku fails with this error

Step 15/17 : RUN DJANGO_SETTINGS_MODULE=hello_world.settings.production SECRET_KEY=somethingsupersecret python3 backend/manage.py collectstatic --noinput
---> Running in b36173638829
Traceback (most recent call last):
File "backend/manage.py", line 22, in
main()
File "backend/manage.py", line 18, in main
execute_from_command_line(sys.argv)
File "/usr/local/lib/python3.8/site-packages/django/core/management/init.py", line 401, in execute_from_command_line
utility.execute()
File "/usr/local/lib/python3.8/site-packages/django/core/management/init.py", line 395, in execute
self.fetch_command(subcommand).run_from_argv(self.argv)
File "/usr/local/lib/python3.8/site-packages/django/core/management/base.py", line 330, in run_from_argv
self.execute(*args, **cmd_options)
File "/usr/local/lib/python3.8/site-packages/django/core/management/base.py", line 371, in execute
output = self.handle(*args, **options)
File "/usr/local/lib/python3.8/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 194, in handle
collected = self.collect()
File "/usr/local/lib/python3.8/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 109, in collect
for path, storage in finder.list(self.ignore_patterns):
File "/usr/local/lib/python3.8/site-packages/django/contrib/staticfiles/finders.py", line 130, in list
for path in utils.get_files(storage, ignore_patterns):
File "/usr/local/lib/python3.8/site-packages/django/contrib/staticfiles/utils.py", line 23, in get_files
directories, files = storage.listdir(location)
File "/usr/local/lib/python3.8/site-packages/django/core/files/storage.py", line 316, in listdir
for entry in os.scandir(path):
FileNotFoundError: [Errno 2] No such file or directory: '/app/backend/frontend/build/static'
The command '/bin/sh -c DJANGO_SETTINGS_MODULE=hello_world.settings.production SECRET_KEY=somethingsupersecret python3 backend/manage.py collectstatic --noinput' returned a non-zero code: 1

Collapse
 
englishcraig profile image
Craig Franklin

That error is due to the frontend files not being in the expected folder after running yarn build. I wasn't able to recreate that specific error, but I was unable to deploy to Heroku due to some mysterious error while trying to install Yarn in the Dockerfile. I've updated dependencies in master and have since been able to build and deploy the app without problem. Trying pulling master and redeploying.

Collapse
 
samplezt profile image
Lucas Griotti

Nice men, it's really helpfull. Good work!

Collapse
 
bardoctorus profile image
Ian Buckley

This is great. I've often wondered whether docker would be a good fit for data viz.

Collapse
 
micakce profile image
Dangelo Guanipa

Hi, excellent tutorial, everything worked like a charm. Just one question, why one-way volumes? Exactly how do they work and how to make good use of them? (Well, 3 actually)

Thanks!

Collapse
 
englishcraig profile image
Craig Franklin

Thanks. The only time I use on-way volumes is for managing the node_modules directory. I don't know the internals well, but with a two-way volume, when you run docker-compose up, docker takes the files on your machine and inserts them in the newly-started container, overwriting any equivalent files that were in your image. This is usually what you want, so you don't have to rebuild the image every time you change your code, but the whole point of installing dependencies in an image is that they are independent of the machine running the container. Using a one-way volume prevents the node_modules directory on your computer from replacing the one in your docker image.

Collapse
 
sparrowan profile image
Alphius • Edited

Iam getting an error after running docker-compose up: Post unix/filesharing/share: net/http: request canceled (Client.Timeout exceeded while awaiting headers)

Collapse
 
englishcraig profile image
Craig Franklin

I just did a fresh, no-cache build on the development branch of the repo and I was able to load the page without error. The timeout error that you're getting suggests internet connection problems, but without more information, I'm not sure what the cause could be.

Collapse
 
sparrowan profile image
Alphius

Yes i managed to solve it by stopping my firewall.