I've developed many full stack web applications with the MERN stack. I thought I would share some helpful tips & tricks I've found that will help those who are current learning or already know the MERN stack.
Tip 1: Use Helmet
This tip applies specifically to Express which of course is a key component the MERN stack. Security is a very important consideration that should take place while you are developing any sort of web application. Helmet is a package that is a collection of various middleware functions that set many different HTTP response headers to boost security. For example, it removes the X-Powered-By header, it sets the Content-Security-Policy header and more to prevent various sorts of attacks.
Tip 2: Use Good Architecture
Modularizing your code and following a good structure for your MERN stack app will allow you to write maintainable and scalable code and build better web applications.
My preferred structure consists of a root folder with two directories:
- A
client directory for the React application
- A
server directory for the Express server
Structuring your application with two directories like this has the added benefit of allowing you to use Typescript. You can use a package like ts-node-dev to compile your server code in regular JavaScript that can be run.
Within the server directory, I suggest 5 directories:
- A
config folder for your typescript types, database config, etc.
- A
controllers folder for each controller (e.g an AuthController to handle logging in and creating an acocunt).
- A
middleware folder for all of your middleware like checking authentication, etc.
- A
models folder for all of your mongoose models.
- A
routes folder for all of your routes which will call on a controller to handle functionality.
And of course, remember an index.js (or index.ts) file in the server directory that runs the express server.
Tip 3: Use A UI Library With React
I think its important to use a UI library in your react application if you want to be able to quickly develop good-looking interfaces without writing hundreds of lines of CSS. You have many options available to you, for instance:
- Bootstrap (react-bootstrap)
- Material UI
- Chakra UI
If you want some more customization, I would recommend using Tailwind CSS. Although this would made your JSX filled with a lot of class names for various styles, it allows you to create beautiful, rich user interfaces while allowing you to completely customize the styles with its utility based approach. I actually have an article showing you how to setup Tailwind CSS with React. Check it our here!
Using a UI library has the added benefit of you being able to focus on the functionality of the application rather than the styling which means you can focus on adding more features and writing better code.
Tip 4: Don't Forget About Testing
Testing an application is a very important part of software development. Testing allows you to discover bugs and problems within your code before they reach your end user. There are many packages available that allow you to test your application. I use and recommend Jest since its got great documentation and allows you to write good unit tests for both your backend and your front end.
Final Tip: Use environment variables
My last tip is to use environment variables. There are many cases where you should use environment variables. To name a few:
- Port to host express app on
- Database URI
- Node Environment (e.g development, production, testing)
- And more...
Using environment variables allows you to keep certain information hidden from your code but still accessible. For instance, you wouldn't want to store your MongoDB URI in your code since anyone who sees it on GitHub will see your database user name and password. You can use environment variables by creating a .env file at the root of your project and then using a package like dotenv to configure the environment variables.
Take Away
I hope you found these tips helpful! I recommend you begin implementing all of them to improve your skills as a MERN developer. If you have any tips yourself that you would like to share, feel free to comment on this article for others to see.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake-K-Yeboah
You can also show your support by buying me a coffee 😃
