# 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
**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
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
:::

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

:::

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
**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
:::

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