Precautions & Rules You Must Follow in Your ME(R/A)N Project...

If you are reading this blog, then you must be a MERN or MEAN developer, and now you want to increase you website's productivity or may want gather more skills. I am not much skillful person though. But, here are some tips & tricks that I use in my work and this may also help you.

---

Backend

First let's talk about the backend. Here we are using Express JS in Node JS (MERN/MEAN). There we already have tons of middleware to use.

1) Don't make any your APIs routs in GET method.

It is the best practices to make all your routs in any methods rather than GET. Whenever you will publish your application for production, you will have to put your frontend codes in your server. This will require GET method will all selectors. So if your api path and frontend path is same and your api in GET method, then you won't get your frontend. You will receive the data that the api provides.

// main.js
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
// Add an api
app.get("/getTodo", (req, res) => {
    // Your logic
});
// Surve frontend
app.get("*", (req, res) => {
    res.sendFile("./build/index.html");
});
// This won't be surved for /getTodo
// Start server
server.listen(process.env.PORT || 5000, err => {
    if (err) throw new Error(err);
    console.log("Server is started...");
});

2) Always try to write your backend code in multiple files and connect them together with express.router()

On breaking your code into several files makes you project management easier. To devide the APIs there is an inbuilt function in express called router.

// main.js
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
// Let's add server.
express.use("/api", require("./api"));
// Start server
server.listen(process.env.PORT || 5000, err => {
    if (err) throw new Error(err);
    console.log("Server is started...");
});

Setup routes...

// api.js
const express = require("express");
const Router = express.router();
// Add all APIs as shown bellow
// /api/getTodo
Router.post("/getTodo", (req, res) => {
    // Logics
});
// Export the router
module.exports = Router;

3) Don't keep any error or warnings to resolve later.

A very bad way of coding is to keep all your warnings even sometimes runtime errors to fix later. When you will move forward, you can realise that your code is messing up, and so soon it will be impossible to continue your project. So, whenever you see an error or warnings, fix that first and then move to other features.

4) Make all your APIs first, then implement bit to the frontend.

If you creates all your APIs first according to your project, it becomes more easier to manage your project. To built APIs calls or to test it, you can use Postman(Software) or ThunderClient(VS Code Extension). From here you can manage all your APIs easily.

5) Access your database visually.

To manage or check your database, it's well to check it visually. If you are working on MongoDB Atlas, you can directly view all your collections and entries from the web. Else, if you are using MongoDB in local system, then install an application called MongoDB Compass. It is officially launched by MongoDB.

6) Use environment variables to store your secrets.

Generously our MERN or MEAN app contains a bunch of secret keys which we don't want to share with anybody. Those secrets might be your MongoDB URI, some open source api keys, secret value for JSON Web Token etc. So, to store those keys, we use environment variables inside an .env file. You can access those keys directly in your Express Server using dotenv package.

---

Frontend

Now let's come to Frontend part. Here we will cover only about React JS as it has more developers than Angular. And we have to choose one for now.

1) Simple App

Try making your app as simple as you can. Don't make tons of unorganized components. This will generally mesh up your app.

2) Modules

In any type of Web app, we use some modules from npm, or some we create by self. The modules created by self, should be stored in a seperate file in a different location like modules/*. Therefore you can access them from anywhere you want.

3) Module CSS

In react js we used to get css simply using-

import "./style.css";

But in this case, we can't create styles with same class again. If we do so, we will mixed up those classes. React actually works on webpack, and importing styles is a feature of webpack. While importing them, webpack usually bundles them and put then in html together. So, your styles Frome different sources, used to mix together.
To get rid of this, now we have module css. This usually converts css into modules. So, that we can easily use same classes over react app.

import style from "./style.module.css";

Here we need to add a sub-extension to the css file called "module". Thus it converts into a module css. Importing this, returns an object with the keys with value of the actual classes and the values with the value of new partially randomly generated class. Thus each classes stays indifferent from each other.

import style from "./style.module.css";
// Return jsx
function App() {
    return (
        <h1 className={style.heading}>Hello World</h1>
    );
}

4) Avoid using CSS class based framework or library.

Try avoiding CSS frameworks like Tailwind or Bootstrap. Those are really good, but sometime it becomes harder to understand jsx code with tons of classes.

To be continue...