Refactor codebase to be a monorepo project

[ferreiro]

In this PR I'm creating a react app for the project, and in order to be able to have independent client and server I'm updating the project to use a mono-repo approach

In order to connect react app with the server I already have in place I'm following this tutorial which uses the same stack as this app (heroku, node...).

[ferreiro]

This CR is the first step to finish: #40

[kwelch]

Issue 1

We may want to convert this to a yarn workspace to avoid the dependency issue. Typically module resolution would not go up a directory unless it was not found in the closest node_modules. So either it was not listed which seems unlikely, or it was not passing process.cwd the way you expected.

[kwelch]

Issue 2

I wonder if you would be able to just call localhost:5000 directly, I also did not see any of the proxy work you mentioned within the react app.

Another option we could do is containerize this and set it up with a proxy that makes it look as though it is all one project. This is how our EB internal setup works.

[kwelch]

do you need to gulp build & gulp watch in the same command. My first though would be that watch is running build continuously.

[kwelch]

Why could you not just call over to localhost:5000? did you get a cors error?

[ferreiro]

Yeap! I got a cors error.
Access to fetch at 'http://localhost:3000/api/status' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Also, I think the problem of using directly dev endpoints is that we'll need to change that once deployed (or implement some logic like: if DEVELOPMENT => localhost:3000, otherwise "ferreiro.me/". I think that's the purpose of the proxy, but not working)

[ferreiro]

Issue 1

We may want to convert this to a yarn workspace to avoid the dependency issue. Typically module resolution would not go up a directory unless it was not found in the closest node_modules. So either it was not listed which seems unlikely, or it was not passing process.cwd the way you expected.

@kwelch OK! I'm updating this to use => https://yarnpkg.com/lang/en/docs/workspaces/#toc-how-to-use-it

[ferreiro]

In the lasts commits I've refactored the logic to be monorepo!!!!

Question: Do we want to have in the repo the yarn.lock and packackage.lock? Is there any good practice around this?

[ferreiro]

Yay! Found in the last bunch of commits how to create a local package, and add it as a dependency to another package.

1. I created design_system package
2. Then in @ferreiro/client I run yarn add /Users/ferreiro/Documents/website/packages/design_system

Voila! Now, in order to use the local copy of the package I run yarn link inside the design_system package, and then inside ferreiro-client I run yarn link "@ferreiro/design-system" which is the name of the package.

[ferreiro]

@kwelch Hey! Excited about this new revision. I think we're really close to launch to prod!

After some tweaks and updates, the webpage is up!!! https://ferreiro-monorepo.herokuapp.com/

Main changes:

• Removed all the react files from ferreiro-client.
• Analyzed dependencies and moved correctly into devDependencies.
• Removed unused dependencies. I took this opportunity to run npm-check and remove all the non-relevant packages from @ferreiro-server.

Some other changes in order to make heroku works:

• Set yarn version into the root package.json (needed by heroku).
• Created heroku-postbuild and installing all the static assets there.
• Removed yarn install from start script, since Heroku already installs all the dependencies when found a yarn.lock, so that was failing the boot up of the server since

Also, I needed to move babel-cli, babel-core, babel-loader, babel-preset-env, babel-present-es2015 (https://medium.com/developer-circles-lusaka/how-to-setup-express-js-server-with-nodemon-and-babel-c3a17218c282) to dependencies, since once I run yarn server Heroku doesn't have the devDependencies (they delete all those dependencies once build).

[kwelch]

running yarn in a bunch of places then npm seems odd.

[ferreiro]

Done! Good catch :)

[kwelch]

This looks simple and great. We could possible remove the design-system since it is not necessary, but all in all this works well.

[kwelch]

Also, I needed to move babel-cli, babel-core, babel-loader, babel-preset-env, babel-present-es2015 (medium.com/developer-circles-lusaka/how-to-setup-express-js-server-with-nodemon-and-babel-c3a17218c282) to dependencies, since once I run yarn server Heroku doesn't have the devDependencies (they delete all those dependencies once build).

We could get around this but it would involve compiling the server before deploying. This is probably not necessary extra piece. Adding babel as a dep is not that bad.

[ferreiro]

Merging this now! Thanks @kwelch for following up on this.

I leave the design system since is gonna be part of the next steps, so we can have that as the starting point.

[ferreiro]

fixes #41

[ferreiro]

Moving here the issues that I posted before in the description, since they are not relevant there anymore. But I wanna keep the story of this task.

Known issues

Issue 1: When $ yarn start inside /web-app, it was trying to resolve dependencies by looking inside the root node_modules.

I got some troubles that I fixed, but I've doubts about them. Basically, there was dependency conflicts between web-app and the project root dependencies. Any time I run yarn start from web-app it threw an error. I think it was trying to get dependencies from the root node_modules instead of web-app/node_modules => That's weird!!

I solved that by removing the following dependencies from the project (standard, webpack, validator). But I wanna know why I was getting that error and why dependencies are resolved in that way

Issue 2: Proxy from web-app/package.json doesn't work, and fetch is trying to call the react app url instead of api.

[DEV mode] I'm running the API/Server in port 3000, and I'm running the react app in port 5000. In order to locally don't need to define localhost:3000/api/v1, I added a proxy. This is supposed to make any fetch() request from the react app (I added a dummy fetch in App.js) to call the localhost:3000 instead of the localhost:5000. I searched online but haven't found a solution.