Tips & Tricks: Developing MERN Stack Applications
These tips are incredibly helpful
4 min read
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:
clientdirectory for the React application
serverdirectory 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
server directory, I suggest 5 directories:
configfolder for your typescript types, database config, etc.
controllersfolder for each controller (e.g an AuthController to handle logging in and creating an acocunt).
middlewarefolder for all of your middleware like checking authentication, etc.
modelsfolder for all of your mongoose models.
routesfolder for all of your routes which will call on a controller to handle functionality.
And of course, remember an
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.
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:
You can also show your support by buying me a coffee 😃
Did you find this article valuable?
Support Blake Yeboah by becoming a sponsor. Any amount is appreciated!