Wayne Codes

It’s been a while since I’ve tried to deploy a web app to production. Honestly, the last time I did this was in a coding bootcamp almost 5 years ago. I’m not really sure what deployment strategies are recommended these days, but after doing some research and talking to a few friends, I think I’ve generally got a direction:

• Containerize with Docker – I don’t have experience with virtualization technology, but I know that in working with larger teams, having containers can be helpful in isolating dependencies and making sure that everyone is developing off of the same set of tech
• Deploy with Kubernetes or ECS – I’m still a little unsure of which approach I’ll take here, but because the app I’m looking to deploy is pretty light, I’m hoping that either option will be pretty straightforward

So far, I’ve downloaded Docker for Desktop and I plan to go through some basic tutorials to learn basic commands.

The app I’m looking to deploy is running locally with the following:-

• Django – backend python framework
• sqlite3 – DB
• Node – frontend server
• React – frontend js framework

Hopefully once I get a grip on Docker, I can utilize Docker Compose, and then by that time, have an idea of what I will use to take my web app live.

My next post will be about working with Docker and where I’ll go from there!

I recently incorporated displaying images along with quotes in my web app. Unfortunately, when I stopped to take a closer look at the front end, I was seeing images re-render multiple times because of how react handles rendering content. (If you look closely, you can see images changing seemingly in place)

For context, as my image source, I downloaded nature images from pixabay and put them in a public/images folder. I was randomly choosing what image would be associated with quote on render, which meant that the images would change during every single render (see code below).

<Card style={{ width: '24rem' }}>
    <Card.Img variant="top" src={imgSrc[mapped[Math.floor(Math.random() * imgSrc.length)]]} />
    <Card.Body>
        <Card.Title>{index+1}. "{quote}"</Card.Title>
        <Card.Text>~ {author}</Card.Text>
    </Card.Body>
</Card>

I wasn’t really sure how to sort through debugging this re-render. At first, I dug into using useCallback and React.memo to control the re-rendering, but I couldn’t quite wrap my head around using those for my own use case.

When that didn’t seem to work out, I decided to map a quote id to a random image and refer to that definition when choosing what image to display with a quote (instead of randomly assigning a quote on render).

    useEffect(() => {
        if (Object.keys(mapped).length === 0) {
            if (quotes.length > 0) {
                let quoteToImgMap = {};
                for (let q in quotes) {
                    let idx = Math.floor(Math.random() * imgSrc.length);
                    quoteToImgMap = {...quoteToImgMap, ...{[quotes[q].id]:idx}};
                }
                setMapped(quoteToImgMap);
            }
        }
    }, [quotes, mapped]);

The above is what I came up with. If the mapped object isn’t populated, I check to make sure the length of quotes is greater than 0 before diving in to map the quotes to an image index. Lastly I set the mapped state variable (not listed above) to my updated map, capturing the list of quotes from the server and the mapped state variable as my dependencies.

I won’t show the result, but because of this update, my images don’t change on every render anymore!