A JavaScript monolith ready to scale
Tags: javascript, webdev, nextjs, discuss
Published: 2022-08-13 10:26:00

In many projects I use this stack to quickly getting the things done at the lowest cost possible.

Next JS provides both Node and React sweetened with built-in features like file-system based routing and much more.

<img src="https://media.giphy.com/media/yqDuymipOa9DBsM1lW/giphy.gif" />

If I need to create a project for a client (and assuming there's no showstopper or impediment to proceed this way after the initial analysis) I'll do the following:

1- Create a Next JS app.

2- Create a DB instance on my VPS (or any provider).

3- Add an ORM with the proper DB driver (I use [Sequelize](https://www.npmjs.com/package/sequelize) -mostly- or [Mongoose](https://www.npmjs.com/package/mongoose) but there are a tone out there, you can pick your favourite one).

4- Define the data model.

5- Add some validation library (I usually use [Joi](https://www.npmjs.com/package/joi) but as the ORM, pick whichever suits best for you).

6- Create a directory "api" inside "pages".

7- Add a folder for each backend entity like `/pages/api/users`

The `index.js` inside will look something like that:
```js
switch (req.method) {
    case 'GET':
        return await getAllUsers();
    case 'POST':
        return await createUser();
    default:
        return res.status(405).end(`Method ${req.method} Not Allowed`);
}
```

8- Add the view for this API inside pages, that's `/pages/users`
Which will use `getServerSideProps` ([see the API Reference](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)) to fetch desired data from this API and show related data.

If you need a component instead, simply create a directory in the root like `components/users`, then you can import your React components in your pages.


![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryvmd48i3krcuz02jxk7.png)

<hr />
Repeat steps 4 to 8 for each entity you need in your project.

You can even convert it into a PWA easily with [Next-PWA](https://www.npmjs.com/package/next-pwa).

## Scaling the monolith
Because it will probably grow in both code and -hopefully- customers.

<img src="https://engineering.giphy.com/wp-content/uploads/2018/01/fiking.gif" />

<blockquote>
If you already know that this project will need to handle thousands of concurrent requests you may prefer to start with a different architecture but in most cases I face you simply don't know how the project will do. That's because it depends on many factors, most of them are on the client's roof and some of them are not even under client's control.
</blockquote>

1- The first step in scaling the project would be increase the amount of resources of your VPS or cloud instance. e.g. If you started with 2 vCores and 2Gb of RAM, maybe you'll need to scale vCores, RAM or both, depending on what's your App doing and your hosting provider plans.

2- When this is not enough or there are forecasts of heavy traffic, you can simply split your /api/ directory and run it on a Node server in a new instance. That change requires few changes on both /api/ code and frontend code. e.g. changing your calls from localhost for a different thingy (if you handled that with env variables congratulations! it will cost like 2 minutes) and wrapping the /api/ inside an Express plus adding some routing.
At this point we separated the frontend from backend 😁

3- If this is not enough, you can then chunk your APIs and provide them through different instances. 
Let's say we've conceptually 3 APIs inside our app `users`, `businesses` and `stats` and our favourite monitoring tool shows us that `stats` is consuming the 60% of the resources. We can move Stats following the same steps into a fresh instance, releasing a good amount of load from the other.

<hr />

Following this conceptual guide we add costs just when the project needs them.

Please note that each step forward into a fully fledged micro-services architecture doesn't eliminate the complexity, it's moving the complexity from the code to the infrastructure thus I recommend to check [some DevOPS concepts](https://dev.to/joelbonetr/all-you-need-to-know-about-ci-cd-as-web-developer-1e19) to make it less of a burden.

<hr />

Do you want a full tutorial on that with code, screenshots and examples? Maybe discuss some step? 

Let me know in the comments!
<img src="https://media.giphy.com/media/TPKTPnBZYNLx1H5Epl/giphy.gif" />