Deploying a MERN (Typescript) project: on Digitalocean, Netlify and Mongo-atlas; with custom domains.
Tags: devops, node, typescript, react
Published: 2022-05-30 10:15:08

Hi. It's been a while. With this post, I'll be teaching you how to deploy a MERN-Typescript application; with what I call <b>'branched deployment'</b> and using your preferred domain names on these servers. I'm a fullstack developer; hence; efficiency and optimisation is my watch-word. The 'branched deployment simply imply, that; I've got the backend (built with NodeJS-Express) seated at digitalocean; the frontend (built with ReactJS) seated at netlify's server and my database (MongoDB) seated at Mongo-atlas. Crazy, right?
Now; there are definitely great advantages with the 'branch deployment'; these advantages simply rests on the basis of having a loosely-coupled system, which ensures a tightly secured sequence for all sides (BE, FE and DB) of the application. So, to reach my backend, you'd need my security sequence, which is different for the frontend(FE) as well as database(DB); as compared to having everything at a place where if I could access the security sequence, then I've got full control of all sides. With this mode of deployment, manageability, optimisation, reduction in downtime, elimination of the 'series-effect' and more are some of the priviledges which this mode earns a fullstack-developer and most importantly, sanity. The series-effect happens, when a code-break in the FE, BE or DB at anytime in development or production, affects every sides of the application. But, with this mode of deployment, that can never be observed. This is not to say that there aren't disadvantages to this mode of deployment. However, the trade-offs are worth it, for the magnitude of advantages being earned. Secondly, this mode is what I'd recommend for teams. 
    I'll discuss in a separate post, how to follow on this mode of deployment from development stage; so as to achieve this purpose. But, for now, I'll assume the following;
<b>1)</b> You've got the application prepared and ready to deploy.
<b>2)</b> You've got your functioning account on all these servers; DigitalOcean, Netlify, Mongo-Atlas
<b>3)</b> You're acquainted with Linux commands; as this would enable you control your linux server from your workstation (or local IDE), rather than DO's bash or your dashboard.
I'll make this post a series; so as not to make it tiring for anyone who loves to follow this path of deployment. Firstly; I'll discuss the deployment sequence of the backend (server). The following are the procedures towards the proper deployment of the server;
<b>a)</b> SSH activation of our droplet, to enable us remotely communicate to the droplet from our IDE
<b>b)</b> Creating another root user, updating and upgrading the linux (Ubuntu OS).
<b>c)</b> Installing current or required version of NodeJS and yarn
<b>d)</b> Git-clonning the repo where our project has been pushed to our droplet
<b>e)</b> Creating as well as hiding our environment (*.env) files on the droplet
<b>f)</b> Installing the pm2-package, and editing our package.json file so as to start the application with the package.
<b>g)</b> Installing the node_modules (package dependencies) of our application
<b>h)</b> Installing Nginx to enable us create custom-domains for our FE and DB
<b>i) Securing our BE with certbot
There's a whole lot; that I know. But; I'll take it gradual as much as I can; with the required illustrations where necessary. That should do for now; please, stay tuned for the updates to follow. Thanks