---
# System prepended metadata

title: Frontend docker configuration issue
tags: [Ports, Frontend, Plando, Document, Bug, Docker]

---

# Frontend docker configuration issue
###### tags: `Document` `Bug` `Frontend` `Docker` `Ports` `Plando`

We had faced two anoying issues that can be sumaried in the following:

- `node_modules` of host machine erasing the node_modules of container.
- App on browser trying to reach the `localhost:3000` instead of `localhost:3333` that is the.


## `node_modules` issue
This one was very straith foward, we choose to just shared `src` folder between `host` and `container`. 
:::success
![](https://i.imgur.com/WCUDHIe.png)
**Note:**
Just bare in mind that the old state was commented but ignore this, it was commented because it was causing this issue.
:::

## `port` issue

This one it was much more trick then the last one.

### Docker port configuration
:::danger
![](https://i.imgur.com/S6yHNnN.png)
This was our port configuration.
:::

`crud:3333` it was a common sense option, because the `frontend` container has to reach the `crud` container. As example of this reasoning, the `crud` and `mongodb` containers comunicate like this.

:::info
![](https://i.imgur.com/DJVgo2S.png)
:::

But thinking more deep about. The crud api will not be reach from the docker itself... but from the browser. And for browser `crud` does not exists.

So the solution to this was the following:
:::success
![](https://i.imgur.com/H7hNUrM.png)

:::

And so, it still not working. Not because of this, but because  the webpack part of the problem.

### Webpack env configuration

Lets talk about the old way to work, every dev should download the repo and add a dotenv file on de root folder. For this work, the webpack had this plugin

:::warning
![](https://i.imgur.com/ob5awrY.png)
**Note:**
This was not wrong, it was working rigth for the old way.
:::

#### Research for the solution

After webpack plugins for enviroment vars.

- [List of webpack native plugins](https://webpack.js.org/plugins/)
- [Enviroment plugin - OUR SOLUTION WAS IN HERE](https://webpack.js.org/plugins/environment-plugin/)

We just replace the old dotenv plugin for this new one.
:::success
![](https://i.imgur.com/0nzw7gP.png)
:::

And this solved, because with this the env vars computed on the containers was now avaliable on the build of frontend.