PLATFORM MONOREPO for TYPESCRIPT projects using DOCKER (React + Express.js)

hello my name is luke and i'm an instructor at 10x developer in this video i will show how to set up a monorepo structure for a distributed platform that consists of react frontend and express.js backend both written in typescript because typescript is 10x javascript although in this case the language does not matter because i'm going to show how to run everything inside docker containers so this can be used to run software written in any other language to be honest with you i don't even have no gs installed on my computer running everything in docker makes it very much easier to set up a local development environment because regardless of what technologies your project is built with in order to run it on locally all you need to have installed is docker for your convenience the rest of this video is divided into five sections in the description below you will find the timestamp links so you can jump directly into specific section if you're only interested in that exact topic these five sections will be covering the following things first i want to start with explaining what exactly i mean when i say monorepo second i will show how to generate a react application using create react app script in the third section i will configure docker compose to run this react application locally i will be using make file to avoid typing long docker commands with multiple arguments then i will bootstrap a small expressjs http service with some very simple rest endpoint to serve as a backend for the react app finally i will write some react code using fetch api to show how does it exactly look when the front end calls the back end so we all gonna see both components working together so that is what you're going to see in this video to watch more from 10x developer please subscribe to this channel and do not hesitate to smash the like button so that i can see if there is any interest and i can provide more content like this thank you recently i have started a new full stack project called tax it is a to-do list application that helps me to stay on top of my tasks before i was using the bullet journal analog system created by ryder carroll and i think it helped me to become 10 times more productive but then i realized that i need a digital system or an app because i kept forgetting to take my paper notebook with me and my phone i always have it around in 10x developer videos i will be using tacx as a standard code base to provide examples that illustrate the topic which is being discussed tax project indeed consists of a progressive web app built with react and a backend node.js service for synchronizing data across different devices now we are going to replicate the same structure as if we were about to start tasks project over again you know when i actually started tasks i said okay there's going to be just one repository on the github to store all the code for the backend and for the front end and that is basically what is called a monorepo so what is a monorepo anyway essentially it is when we have several packages but we store them all in one source control repository opposite approach when we have packages stored in multiple repositories is called polyrepo in polyrepo we will have each repository having only one package in its root directory and if there are more packages they all gonna have their own repositories even if they have dependencies on each other they are still kept separately i think it was unix philosophy that created this culture where it is believed that each tool must do one job and must do it well but that results in having your code spread across so many different places although package managers are great in fetching foreign dependencies they are so great that hello world react application has like thousand dependent node modules when each package is evolving versioning may become complicated and it is hard to drop backwards compatibility as you cannot tell easily if some code is never used from another package maybe this is why monorepo is getting more and more popular it looks more simple all packages are in the same place and this easy to find references you don't need to create versioning strategies because everything in the repository is up to date finally when you clone a monorepo you don't have to look anywhere else you have all the code that you need to build and run your project it is important to understand that there are two different types of monorepo first type is a colossal monorepo you may have heard that some big companies like google facebook or twitter use their gigantic monorepos to store all their code and digital assets in one place i'm talking about massive amounts of storage billions lines of code they estimate that at google the repository takes more than 80 terabytes and their custom build pipelines and version control systems are designed to work at the scale and yes they are more complex than a gas works factory those big tech companies have good reasons to use the setup but for the rest of the industry people like us it would not be a practical solution it could be overkill so instead i would like to talk about platform monorepo which is currently becoming a new trend so in platform one repo code that runs together is kept together not all the code that you have but only what is relevant for a specific project so it can be all your backend services with all the front-end clients maybe their build pipelines and some shared libraries so it goes through all the layers of your full stack but it does not cross the boundaries of that domain if you have your entire stack in one place it makes it easy to onboard new developers to a project allows refactoring across services with more confidence and avoids version incompatibilities now i want to show how to set up a new platform monorepo so we can go ahead and start organizing our code inside one directory containing multiple different packages in this case is gonna be just two simple applications a react front end and the node.js back-end both placed in one repository we will start with a react application because in tux project users first see the web app so we start with virtually empty directory i will use create react app script to create an app conveniently named app because i feel creative today and i want typescript as i said before i don't have npm look even node cannot be found luckily i have docker here so how can i run create react app okay let's do it again so create react app app using typescript template and then wrap this command with a docker container in which process working directory is mounted on slash temp and the working directory is set to this mount point and we will use the official node image to this container run it it is fetching the node image it will take a while for this command to finish looks like it finished downloading the docker images and it started to run the mpx command in the container already so what is it exactly doing let's say on my computer i have tacx monorepo here and i'm inside of this directory there is nothing just this license file here at the moment when i start the container the container has its own sandbox file system on this slash temp path inside the container the tasks directory from the host machine will be mounted which means the container while running will be accessing this mono repo directory from my host machine the mpx command will generate this app directory and the container will exit but the changes done in the mounted directory will remain so this app folder is effectively created in our monorepo alright let's see okay it looks like the command is finished and yes i can see the app directory let's give it a closer look in the text editor i can see this app directory has react application structure to run it i will use docker compose a tool that describes how docker containers run together we need to create a docker compose yaml file so let me just touch this file to create it it's funny how you touch something that does not exist and by doing so you create it i wish i could touch money like that the file is here open it let's make it big so the version is 3.7 and then in the services section let me introduce this app configuration we'll be using node image the generated app directory will be mounted as a volume and the commands in docker will be run in this working directory entry point is bash means that the command is a bash script this pipe opens a multi-line ci equals true is required when this app runs in a container and it is just a normal npm start but if it fails to execute the container will fall back to this first has to echo about the situation saying that the service is not started but the container is up and what the container is doing is tailing nothing which is a command that blocks until the end of times but say in case the mpm started successfully then we need to expose this port so that you can access the server on the localhost and that's it now let me touch a make file okay now open this touched file in this new make file i will define some repetitive commands first is up app it will run docker compose to start the app so let's define this long docker compose command here also make sure you use tabs and not spaces in the make file then let me declare logs it is a really common thing you want to do and then the next is install app this will simply run npm install on the application container app into will get you into the shell of the application and last thing is a little bit different unrootify command because files created by docker container belong to the root user and they are not writable to your normal user an unrootify task will take back the ownership of these files and now in the black window we run make up app task so we don't have to write the long sausage of the docker compose command we defined this task in the make file make up app command will bring up the app makes sense and the log shows that the application is up and running on localhost take a look this is a hello world react application in tax stack there is also a backend service let's introduce it to the same monorepo here right next to this react.js front end so i'm making a directory here let me call this service sync just like in the tuxx project to create a node.js application from scratch we use npm init again we need to wrap it with docker container to run the command and then we share the sync directory as a volume in the container and the same directory we use as a work directory and when we execute this command it creates a basic package.json file inside the container volume so it's actually available on a host file system yeah okay open it and there's going to be a script to start the express js app on development we will use nodemon so that it can rerun ts node on any changes on the project files and index ts will be an entry point to this application but when i try to save the package json i'm getting this permission issue and i want to show how you can use make unrootify to solve this type of issue and if it asks for your password just type it in and now you can save the package json without any problems remember in docker compose i have already defined the run configuration for the react app so you can simply copy this boilerplate from the app section and just paste it below and replace the names of the application to sync and then we're not going to need this environment variable and the port name will be different for this backend service say four thousand now in the make file we can also copy over the tasks to work with this new service so this is the task that brings the container up this one is to run npm install and finally this one is to get into the shell of the container we just replace app with sync we need to replace the container name and the task name itself just do the same with into task and now just make it even more convenient i would like to introduce a combined up task that executes up app and the new up sync so that in the end of the day you can bring everything up with one short command and also it is good to have combined install which is the same thing and then then we run make up sync to bring up the sink container shell into that container and here let's add some libraries for this node.js application which is express http server and the quartz middleware to run the server in the development mode you need some additional dependencies nodemon typescript and ts node okay so now when these are installed you can close this window you can see here in the package json the new dependencies have been added and then open another black window and you're going to need a source directory for the sync server and this file will be the entry point to this service so open this new file and here in the top let me add the imports of the libraries express and course then declare an http app which will use course middleware declare port variable which is equal to 4000 so your application can listen on that port and execute this callback when it is ready to serve incoming requests and here just like the fact that the server is up and running and so that we can access it on localhost using this port and then the express application will actually handle get requests on the root url so now we can restart the whole world to see if the combined make task works make up it restarted both containers let's see the logs and the lines in yellow are from the sync server looks like it started to serve some http we can open it and it looks good the react application will be calling this sync http endpoint using fetch api so if we look at the logs again we can see that the react app is also saying that it is up so when you open it you can look closely there is an instruction for you to edit this file so open the app directory and inside source is this app.esx here is the line you could see on the web page make it big here what if i display some response from the sync server here add this new dl here with dt as a title and the dd will be a placeholder for the sync status which will come from the sync server so let's declare the sync status somewhere above saying it's going to come back from the statehook with default value is loading okay your state is not imported in this file okay save it and this is what we got all right but it is not actual response from server so let's make it happen right here use effect hook will execute this call back import the hook first so we simply fetch from localhost 4000 and then from the response we are going to get the text and then with this text as a string actually we need to take the setter for a sync status from the state hook then just execute the setter passing fetch text to it and here we go if it updates it now yep clearly gets the status from the sync server which says it's active and it looks like both components work nicely together and the whole setup is now done if you had troubles following this tutorial or you've missed something you can simply check out tag from tax repository using this command to get all the code which is written during this tutorial video so you can play with it yourself and if you wish you can use it as a starting point for your own project and that is all what i wanted to share in this video and thank you so much if you made until this point i really appreciate you watching it i'm kind of new to youtube therefore if you have any feedback please leave comment perhaps you can even suggest better ways of doing this thing and if you want to be notified when i create more content please subscribe to this channel and thanks again see you later

Channel: 10X Developer

Views: 2,058

Keywords: docker, monorepo, fullstack, react, node.js, microservices

Id: 9JrQP90c45E

Length: 23min 2sec (1382 seconds)

Published: Tue Jul 28 2020