Implement Docker for Development

[gaylem]

Description

We want to streamline our setup process for our developers and improve our version control by setting up Docker for electrify-chicago. Changes made:

1. Added Dockerfile
2. Added docker-compose up.yml
3. Added .dockerignore file
4. Updated instructions in README.md

Fixes #84

Testing Instructions

1. Run docker-compose up

2. You should see the following in your terminal and be able to view the site at http://localhost:8080

   

3. Open up a bash shell in the Docker container by running docker-compose exec electrify-chicago bash and then test the linting and data processing commands in the updated README.

4. Review the README and confirm if the instructions are accurate.

5. Make a change on the frontend to confirm changes are visible in development. It's a little slow, but if you wait a second it should update on the client automatically.

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes

[netlify[bot]]

✅ Deploy Preview for radiant-cucurucho-d09bae ready!

Name	Link
🔨 Latest commit	e069adcc1805470f1021f2829becc4b2cca69604
🔍 Latest deploy log	https://app.netlify.com/sites/radiant-cucurucho-d09bae/deploys/661aa7944d6e790008e7d182
😎 Deploy Preview	https://deploy-preview-88--radiant-cucurucho-d09bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gaylem]

Welp, I'm getting the following error now: /bin/sh: 1: gridsome: not found

docker-compose up              
[+] Running 1/1
 ✔ Container electrify-chicago-electrify-chicago-1  Recreated                                                                             1.0s 
Attaching to electrify-chicago-1
electrify-chicago-1  | yarn run v1.22.22
electrify-chicago-1  | $ gridsome develop
electrify-chicago-1  | /bin/sh: 1: gridsome: not found
electrify-chicago-1  | error Command failed with exit code 127.
electrify-chicago-1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
electrify-chicago-1 exited with code 127

It looks like my /app directory isn't showing up in my container:

gaylemartin@MacBook-Pro electrify-chicago % docker exec -it 4d0c9a431680 sh  
/ # ls
bin    dev    etc    home   lib    media  mnt    opt    proc   root   run    sbin   srv    sys    tmp    usr    var

Here's my current Dockerfile. I've moved some things around, but the error stays the same.

# Dockerfile

# Ensures Node.js 16.x is installed, which is required for running Gridsome app
FROM python:3.9

# Add the NodeSource PPA
RUN echo 'Package: nodejs\nPin: origin deb.nodesource.com\nPin-Priority: 600' > /etc/apt/preferences.d/nodesource \
    && curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
    && apt-get install -y nodejs

# Install updates
RUN apt-get update

# Install yarn
RUN npm install -g yarn

# Set working directory
WORKDIR /app

# Copy requirements.txt to the working directory
COPY requirements.txt .

# Copy package.json and yarn.lock to the working directory
COPY package.json yarn.lock ./

# Copy the rest of the application code
COPY . ./

# Install Python dependencies
RUN pip3 install --no-cache-dir -r requirements.txt

# Install dependencies
RUN yarn install

# Expose the port that the app runs on
EXPOSE 8080

# Start the app in development mode
CMD ["yarn", "develop"]

If anyone has any ideas let me know, otherwise we can take a look at it next week.

[gaylem]

Hey again, I went ahead and created a stack overflow about this, sharing here in case anyone wants to follow: https://stackoverflow.com/questions/78281569/error-bin-sh-1-gridsome-not-found-after-docker-image-build

[vkoves]

@gaylem - great use of StackOverflow, I saw someone already responded in comments! 🥳

[gaylem]

@vkoves I know I just saw!! I'm putting the finishing touches on things now 😄

[gaylem]

All righty, I was able to run my container locally and view the site! So this should be ready for review 🥳

[vkoves]

@gaylem - could you document in the README how you would run the data process and tests with Docker? I imagine you can open shell in docker somehow and then run a second command. I'll give this a full review sometime next week!

[gaylem]

@vkoves yeah no problem, I'll look into it!

[gaylem]

@vkoves I updated the instructions and was able to run yarn lint-fix just fine. I'm not sure if I'm running the data processing commands correctly, though. I'm just running them in the bash shell in the root folder. Let me know if there's some nuance I'm missing. Thanks!

[gaylem]

@vkoves I managed to get all the tests working in the bash shell!! Couldn't figure out the entrypoint approach, though. I think this is good for now and we can always open a new issue to improve it. Let me know what you think!

[vkoves]

@gaylem - if you change data, Gridsome has to be restarted. Would docker-compose stop and start do that, or do you need to use down?

[gaylem]

@vkoves Ohhh I'm not totally sure. The internet said this: "The ‘docker-compose stop’ command merely halts running containers without removing them. In contrast, ‘docker-compose down’ goes a step further to stop and also discard the containers and the networks they were utilizing." So down will totally remove the containers.

It would probably be faster to just use docker-compose stop since you wouldn't have to rebuild again when you run docker-compose up, but I would have to test it out to see if it works.

I don't know how to change data yet. Maybe you can show me how on Tuesday and we can test it out? Also happy to pair up before then if you're available.

[vkoves]

@gaylem - it turns out changing any queries (e.g. change perPage: 15 to perPage: 30 in Index.vue). Just stopping and starting works, since that stops Gridsome and restarts it, which is fine!

[vkoves]

@derekeder from QA this looks good to me, but do you mind just checking out the Docker config, since you're more of an expert?

[gaylem]

@derekeder Huzzah!! Thanks for reviewing!

I tried to get your entrypoint suggestions to work but I just couldn't wrap my head around it. Maybe at Hack Night we can talk through it again and see if there are more improvements that can be made, and I'll raise another issue for them.

[derekeder]

sounds good!

[derekeder]

@vkoves I have a fix for running commands via a docker entrypoint based off of @gaylem's fork. Lets merge in this PR first, and I can open up a small PR for it

[vkoves]

@gaylem and @derekeder - all set!

[derekeder]

thx. PR opened: https://github.com/vkoves/electrify-chicago/pull/90