First published: June 15, 2023 | Permalink | RSS

I am currently volunteering on a project as part of Code for Philly's Launchpad 2023. I am working with a small team of developers and UXers to develop a project that will seek to connect Philadelphians to comfortable public spaces, with the focus being on finding places spontaneously.

We got started at the end of March this year and the launchpad demos will be on May 10 as part of Philly Tech Week 2023. Come see our presentation! For the past few weeks we have been simultaneously going through the discovery of what we want to build and setting up the boilerplate to build our code on.

One speed bump I ran into was setting up a docker-compose.yml file. In my work life and in my other Code for Philly project, we use these to build, run, and manage our Docker containers for the frontend, backend, and database. However, I realized this week I have never set one up from scratch since those above projects were either already built or built from a template we couldn't use for this project.

For context, we are going to be building a React frontend with Leaflet for our map component, and a Django backend with PostgreSQL and PostGIS. We also decided to set up React with Vite to avoid create-react-app.

Setting up the Dockerfiles and docker-compose.yml file were easy enough using the Docker setup documentation. I made sure each docker container built and ran on its own, but when putting them together with compose, I was getting this error from Docker:

error: cannot resolve import from 'vite' from vite.config.ts

After a lot of searching, looking at forums and docs, and trying many different things, this error mostly pointed to the idea that vite is missing. Where a lot of the solutions pointed to an old issue with Node 14, Typescript, and Vite and that solving it with updating Node to 16, that wouldn't work for us since we are using Node 18.

I checked to make sure it was in the package.json, and making sure that npm install was running successfully. And there I found it: Despite, the Dockerfile calling for npm install to run when building, the logs showed it wasn't actually running.

The solution I found pointed to using the following line in the Dockerfile in our React app:

      # From: 
      ADD . .
      RUN npm install
      CMD ["npm", "run", "dev", "--host"]
      # To: 
      # See the PR for the full Dockerfile.
      ADD . .
      ENTRYPOINT [ "/entrypoint.sh" ]
      CMD ["npm", "run", "dev", "--host"]
      

And of course adding that entrypoint.hs file with:

      #!/bin/sh
      npm install
      npm rebuild esbuild
      exec "$@"
      

The npm rebuild is there as a precaution for a problem I was running into with the wrong esbuild coming from the Docker host, but using that entry point file did successfully get the node_modules installed with the correct esbuild and now we are happily boilerplated and ready to roll building out as much of our demo as we can in the next week!

Thank you for reading!