---
# System prepended metadata

title: The updates to move plando to new architecture and structure
tags: [Task, React, Architecture, React-boilerplate, Frontend, Plando]

---

# The updates to move plando to new architecture and structure

###### tags: `Task` `Frontend` `Architecture` `React` `React-boilerplate` `Plando`


## :memo: Where do I start?

### Step 1: Tasks identified

- [x] Identify and move dependencies
- [x] Migrate Material Design theme config and theme context
- [x] Migrate authentication logic
- [x] Migration Sign-in page to boilerplate
- [x] Migration Not found page to boilerplate
- [x] Migration Kanban page to boilerplate
- [x] Add DotEnv dependency to manage environment variables
- [x] Migration develop branch to boilerplate 
- [ ] Create mock server to serve application

### Step 2: Things to do in the future
1. Add Prop Types to validate props received in component (Or use TypeScript)


## Problems found during jorney

:x: It icon represent the problem.
:sunglasses: It icon represent the problem correction

---

### When I start boilerplate the error below happened
![](https://i.imgur.com/sDNtleI.png)

:x: The `app.js` file was as initial capital letter `App.js`
:sunglasses: The correction was change it initial capital letter to lowercase

### When I start plando the error below happened
![](https://i.imgur.com/LSzhTgk.png)

:x: Same error above, the import path was as initial capital letter
```javascript=2
// pages/index.js
export { default as Kanban } from "./Kanban";
export { default as SignIn } from "./SignIn";
```

:sunglasses: Just change to lowercase and this problem has done
```javascript=
export { default as Kanban } from "./kanban";
export { default as SignIn } from "./signIn";
```

### Add Dotenv dependency and config webpack to work with it
:x: The project don't load environment variables as default
:sunglasses: Added a new dependency to manage `.env` file via webpack

Was added in project `dotenv-webpack` to load environment variables dynamically

```shell=
$ yarn add -D dotenv-webpack
```

```javascript=
// internals/webpack/webpack.dev.babel.js
...
plugins: [
    new Dotenv({
      path: path.resolve(__dirname, '..', '..', '.env'),
    }),
]
...
```

### Starting a container with a MySQL database
:x: The nodejs server need a MySQL database to work correctly
:sunglasses: Using docker to create a container with MySQL database.

Query the [docker hub](https://hub.docker.com/_/mysql) to find the best way to create a MySQL container

```shell=
$ docker run --name plando-mysql -e MYSQL_ROOT_PASSWORD=plando mysql:latest
```

> Obs: It'll doesn't used for while because we choose to go mocking