How deploy from a git monorepo
This week: I was taking part of a code challenge and one of the requirements where to create a full stack application in one repo. I was always told to separate the frontend code from the backend code which make so much sense now that I’ve been deploying full stack apps. For one it make deploying easy, because you can have you hosting server point directly to the repo where your code lives. And with most hosting sites that I’ve used have a good dashboard that make deployment simple.
Note: For this example, I will be deploying my backend code to heroku, and the frontend code to netlify.
Deploy to Heroku
There are two way that I’ve been deploying apps from my repos; you can use the Host’s dashboard to deploy or the heroku cli from your local machine. I to do a hybrid of both. Head over to heroku and assuming you have an account, sign in then create a new heroku- app.
Note: We will be using the heroku cli from this point on, so make sure to install.
After creating you new heroku from the dashboard open up you terminal and navigate to the root directory of your project. Then Login into your heroku via heroku cli.
cd Project_Name
heroku login///set git remote heroku to:https://git.heroku.com/my-project.githeroku git:remote -a my-projectgit add .
git commit -m "Commit from heroku-deploy for deployment"
git push origin master
git subtree push --prefix YourAppProject https://git.heroku.com/my-project.git
once logged in, set up the git remote; you can find your git remote address by going to the heroku dashboard. Navigate to you heroku project you created, and under Setting => App Information. You will find you Heroku git URL .
The heroku git:remote -a my-project will connect your heroku app to your github subdirectory. after that just push with the git version control commands. Last step is to do a subtree push the you’re done!. You have just deployed your backend.
Deploy to Netlify
You can literally make Create-react-app and deploy under 60 seconds with netlify. And the have made it easy to deploy from monorepos as well now. For this deployment I use a file to set up the configuration and the dashboard as well. Let see the netlify.toml file.
Note: Using netlifys dashboard point to the repo where you client side project lives.
//file structure .
|
|--backendDirectory
|
|--frontendDirectory
|
|--.netlify.toml
|
|--README.md/////.netlify.toml[build]base = "/frontendDirectory"publish = "/build"command = "npm run build"
Start by creating a netlify.toml and configure the file as shown above. Base is the directory you want to use, publish is the directory where the source code that is read, and command will find the package.json file to read the script command provided. Then push the file up into your version control and done.
One more thing before concluding… in order to read from environment variables, we’ll need to include those in domain setting in the netlify dashboard.
Under Domain setting go to Build & deploy -> Environment, then add environment variable there so your application has access to you secret information. There more security measures as well but we won’t go over this here 🙃. read here instead. thats folks. 👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼
