---
***[Building the next v4v.app v2](https://peakd.com/created/v4vapp-v2)***

***This is a value for value post: see the explanation in the footer.***

---

<div class="pull-right">

![Quasar from @ausbitbank Discord AI](https://files.peakd.com/file/peakd-hive/brianoflondon/AJeb3cT1tosrrzZJBb7sGHV6MmP3G3GXxYTgczVe6pLosy4dYMZaiPDmhqmT1G4.png)

</div>

## Dockerfile

The first thing I did today was add a `Dockerfile` to the project. I copied this from the one I've been using with [v4v.app](https://v4v.app/). 

You can see the Dockerfile here:

https://github.com/brianoflondon/v4vapp-frontend-v2/blob/feature/add-dockerfile/Dockerfile 

ChatGPT provides the following explanation of the Dockerfile:

*This is a Dockerfile, a file used to define a Docker image that can be used to run an application or service in a containerized environment. The Dockerfile consists of instructions that specify the steps to create the Docker image.*

*This particular Dockerfile has two stages. The first stage uses the Node.js version 16 base image to build a Quasar project. The steps in this stage involve setting the working directory to /app, copying the package.json and yarn.lock files, installing the dependencies using yarn, copying the rest of the application code, and building the Quasar app for production using the quasar build command.*

*The second stage uses the Nginx stable version base image to serve the built project. The steps in this stage involve copying the built project from the previous stage, copying the Nginx configuration file, exposing the default Nginx port (port 80), and running the Nginx server using the CMD instruction.*

*Overall, this Dockerfile builds a Docker image that can be used to run a Quasar app in a production environment using Nginx as the web server. The first stage builds the app, and the second stage serves it using Nginx.*

I also had to add an `nginx.conf` configuration for Nginx (the web server software used within the Docker image).

## Upgrading Quasar

I tried to upgrade to the very latest version of Quasar. However that caused the Docker build (which was working) to fail. With a bit of help I tracked down the problem to this line:

```
# Build the Quasar app for production
RUN npx quasar build
```

This shouldn't be a problem, but something in the upgrade caused a breakage so I have [reported that on the Quasar github page](https://github.com/quasarframework/quasar/issues/15806).

I figured out that the following change does make it work again but I know that `npx` is the preferred way to run this within Docker.

```
RUN yarn global add @quasar/cli
RUN quasar build
```

### Solution

As I was writing this post, my issue on Github was answered. This wasn't a problem with Quasar, the fault is mine (sort of). The problem is in my file giving all the dependencies for the project which has two conflicting lines. 

>Your project seems to be a q/app-vite one, but you have both q/app-vite and q/app-webpack specified in your package.json.
>
>Remove q/app-webpack. Also, for future reference, q/app-* should never be in "dependencies" but in "devDependencies".

Following this information I ran `yarn remove @quasar/app-webpack` and reverted the `Dockerfile` back to the one with `RUN npx quasar build` and everything works.

There's still a question for the Quasar people as to why `@quasar/app-webpack` got into my project, I don't think I manually installed it but I've got to say package management in Javascript is a convoluted mess so perhaps I did something which had that consequence.

## What did we learn?

ChatGPT is excellent... but finding real experts is priceless and thinking I had found a bug in Quasar (whilst I was wrong) led me to ask for help in exactly the right place.

Nobody knows all this stuff. Many people know a lot more than I do but part of the skill here is knowing where to find the answers to anything that's bothering you.

## It's all on Github

You can see all the steps in this branch: https://github.com/brianoflondon/v4vapp-frontend-v2/tree/feature/add-dockerfile

![Adding Docker](https://files.peakd.com/file/peakd-hive/brianoflondon/Eo44KEHZ6xdYFrHcp1F4KHWaxuMYGrtHAxKSfSLiwvseamnzwBzTSgjrqS3kcFadmRL.png)


-------

## Value for Value

For the last few months while building @v4vapp I was generously supported by the DHF. Going forward I have a much more modest support which covers direct server costs and a little of my time.

If you appreciate the work I do on and around Hive, you can express this directly: upvoting posts on Hive is great. Also consider a direct donation (there's a Tip button on Hive or a Lightning Address) on all my posts.

**[Support Proposal 244 on PeakD](https://peakd.com/me/proposals/244)
[Support Proposal 244 with Hivesigner](https://hivesigner.com/sign/update-proposal-votes?proposal_ids=%5B244%5D&approve=true)
[Support Proposal 244 on Ecency](https://ecency.com/proposals/244)
[Vote for Brianoflondon's Witness KeyChain or HiveSigner](https://vote.hive.uno/@brianoflondon)**

-------

<div class="pull-right">

![Send Lightning to Me!](https://files.peakd.com/file/peakd-hive/brianoflondon/AK3gcbmQA5oP28nnfgu5MiW8JCXw1XA6tYghwFWbSkPW2P6hXto5i7TDRTkPRVa.png)
</div>

- [Get Fountain for Podcasts and 3speak shows](https://fountain.fm/refer/brianoflondon-76b73a585e)
- [Find me on Telegram](https://t.me/brianoflondon)
- [V4VAPP Support on Telegram](https://t.me/v4vapp_support)
- [Vote for Brianoflondon's Witness KeyChain or HiveSigner](https://vote.hive.uno/@brianoflondon)
- [Vote for Brianoflondon's Witness direct with HiveSigner](https://hivesigner.com/sign/account-witness-vote?witness=brianoflondon&approve=1)
- [Find my videos on 3speak](https://3speak.online/user/brianoflondon)
- [Verify my ID and Send me a direct message on Keybase](https://keybase.io/brianoflondon)