Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Python Answers

How to get the full URL of the image value of a Python Django REST framework Imagefield?

Labrador retriever puppy walking on green grass

Sometimes, we want to get the full URL of the image value of a Python Django REST framework Imagefield.

In this article, we’ll look at how to get the full URL of the image value of a Python Django REST framework Imagefield.

How to get the full URL of the image value of a Python Django REST framework Imagefield?

To get the full URL of the image value of a Python Django REST framework Imagefield, we can get it from the image value’s url property.

For instance, we write

class CarSerializer(serializers.ModelSerializer):
    photo_url = serializers.SerializerMethodField()

    class Meta:
        model = Car
        fields = ('id','name','price', 'photo_url') 

    def get_photo_url(self, car):
        request = self.context.get('request')
        photo_url = car.photo.url
        return request.build_absolute_uri(photo_url)

to create the CarSerializer that get the URL of the car.photo image from car.photo.url.

And then we call request.build_absolute_uri with the URL to return the absolute URL.

Conclusion

To get the full URL of the image value of a Python Django REST framework Imagefield, we can get it from the image value’s url property.

Categories
Python Answers

How to generate a random hex color in Python?

Labrador retriever puppy walking on green grass

Sometimes, we want to generate a random hex color in Python.

In this article, we’ll look at how to generate a random hex color in Python.

How to generate a random hex color in Python?

To generate a random hex color in Python, we can generate random numbers for rgb values.

For instance, we write

import random
r = lambda: random.randint(0,255)
print('#%02X%02X%02X' % (r(),r(),r()))

to call the random.randint method to generate numbers between 0 and 255.

We call that in a lambda function and we assign the lambda function to r.

Then we call r 3 times to generate the rgb values.

Conclusion

To generate a random hex color in Python, we can generate random numbers for rgb values.

Categories
Docker

How to add hot reloading with docker-compose?

Labrador retriever puppy walking on green grass

Sometimes, we want to add hot reloading with docker-compose

In this article, we’ll look at how to add hot reloading with docker-compose

How to use docker-compose to build multiple services?

To use docker-compose to build multiple services, we can create a Dockerfile for each service.

Then we create a docker-compose.yml to build each service with the Dockerfile for each service.

For instance, if we have the frontend and backend service in the frontend and backend folder respectively, then we create a docker-compose.yml in the root folder with

version: "3"
services:
  frontend:
    build: ./frontend
    ports:
      - "8091:8091"
  backend:
    build: ./backend
    ports:
      - "8090:8090"
    volumes:
      - ./backend:/usr/src/app

We set build to the folder with the Dockerfile we want to run.

ports map the port from the Docker container to the port exposed to the outside.

volumes map the folder in the project to the folder in the Docker container.

Mapping the volumes with volumes lets us add hot reloading.

In the frontend folder, we add a Dockerfile by writing

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

EXPOSE 8091
CMD [ "http-server", "dist", "-p 8091"]

to build the frontend container.

And in the backend folder, we add a Dockerfile by writing

FROM node:16

WORKDIR /usr/src/app
COPY package*.json ./

RUN npm install
RUN npm i -g nodemon
COPY . .

EXPOSE 8090
CMD [ "nodemon", "-L", "server.js" ]

to build the backend container.

We use the -L option when running nodemon to let it watch for changes in mapped volumes.

And then we run docker-compose up to build both containers.

Conclusion

To use docker-compose to build multiple services, we can create a Dockerfile for each service.

Then we create a docker-compose.yml to build each service with the Dockerfile for each service.

Categories
Docker

How to specify the Dockerfile to use for each service with docker-compose?

Labrador retriever puppy walking on green grass

Sometimes, we want to specify the Dockerfile to use for each service with docker-compose

In this article, we’ll look at how to specify the Dockerfile to use for each service with docker-compose

How to specify the Dockerfile to use for each service with docker-compose?

To use docker-compose to build multiple services, we can create a Dockerfile for each service.

Then we create a docker-compose.prod.yml to build each service with the Dockerfile for each service.

For instance, if we have the frontend and backend service in the frontend and backend folder respectively, then we create a docker-compose.yml in the root folder with

version: "3"
services:
  frontend:
    build: ./frontend
    ports:
      - "8091:8091"
  backend:
    build:
      context: ./backend
      dockerfile: ./Dockerfile.prod
    ports:
      - "8090:8090"
    volumes:
      - ./backend:/usr/src/app

We set build to the folder with the Dockerfile we want to run.

ports map the port from the Docker container to the port exposed to the outside.

volumes map the folder in the project to the folder in the Docker container.

We specify the Dockerfile to use in the ./backend folder with

build:
  context: ./backend
  dockerfile: ./Dockerfile.prod

In the frontend folder, we add a Dockerfile by writing

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

EXPOSE 8091
CMD [ "http-server", "dist", "-p 8091"]

to build the frontend container.

And in the backend folder, we add a Dockerfile.prod file by writing

FROM node:16

WORKDIR /usr/src/app
COPY package*.json ./

RUN npm install
RUN npm i -g forever
COPY . .

EXPOSE 8090
CMD [ "forever", "server.js" ]

to build the backend container.

And then we run docker-compose -f docker-compose.prod.yml up to build both containers.

Conclusion

To use docker-compose to build multiple services, we can create a Dockerfile for each service.

Then we create a docker-compose.yml to build each service with the Dockerfile for each service.

Categories
Docker

How to use docker-compose to build multiple services?

Labrador retriever puppy walking on green grass

Sometimes, we want to use docker-compose to build multiple services.

In this article, we’ll look at how to use docker-compose to build multiple services.

How to use docker-compose to build multiple services?

To use docker-compose to build multiple services, we can create a Dockerfile for each service.

Then we create a docker-compose.yml to build each service with the Dockerfile for each service.

For instance, if we have the frontend and backend service in the frontend and backend folder respectively, then we create a docker-compose.yml in the root folder with

version: "3"
services:
  frontend:
    build: ./frontend
    ports:
      - "8091:8091"
  backend:
    build: ./backend
    ports:
      - "8090:8090"
    volumes:
      - ./backend:/usr/src/app

We set build to the folder with the Dockerfile we want to run.

ports map the port from the Docker container to the port exposed to the outside.

volumes map the folder in the project to the folder in the Docker container.

In the frontend folder, we add a Dockerfile by writing

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

EXPOSE 8091
CMD [ "http-server", "dist", "-p 8091"]

to build the frontend container.

And in the backend folder, we add a Dockerfile by writing

FROM node:16

WORKDIR /usr/src/app
COPY package*.json ./

RUN npm install
RUN npm i -g nodemon
COPY . .

EXPOSE 8090
CMD [ "nodemon", "-L", "server.js" ]

to build the backend container.

And then we run docker-compose up to build both containers.

Conclusion

To use docker-compose to build multiple services, we can create a Dockerfile for each service.

Then we create a docker-compose.yml to build each service with the Dockerfile for each service.