![]() To ignore the files and directories we don't want stored in our repo.There's only a couple things that will need to be there for this project structure to work which I'll point out.Įach directory, client and server, needs: Here's a shot of the client and server directories expanded just to show you how I have it setup. I also used Webpack for the server directory as well to allow all those beautiful imports and exports to work for me and allow me to separate responsibilities on the server-side. ![]() ![]() The base of the project I deployed was the Create-React-App, which comes with a and other basic configurations out of the box, for the front-end. ![]() This was a big reason I went the route I did for deployment because for me I wanted to keep the structure pictured above with a clear separation of client-side code and server-side code. I do know that in some cases for deployment on one machine a lot of devs must nest their entire client directory inside of server. Host your Express API on one machine and the React App on anotherĭeployment is not something I have a ton of experience with so the first two options I've never attempted.Split client and server apart (the option for this guide).This will allow your Express and React files to still live on one machine but each will be served by a different server.Your Express and React files will live on the same machine and Express will both serve your API requests and the React files as well.Some Options for DeploymentĬredit to Dave Ceddia for putting this list together - this was found in a blog post of his. This is also a big reason why this project was deployed in the way this guide will describe. Again, this is absolutely personal preference. I feel it makes it logical and simple to work with. For instance if there's some UI feature I want to add/fix/alter then I have no reason to open my server directory. It makes it easier for me to work on one or the other by just collapsing that whole folder. I like this structure because to me there's a clear separation of responsibilities. My VS Code settings and extensions JSON files.Here is my fully collapsed root directory to show you the top-level: By this I mean where our directories are in relation to each other. One thing that is definitely dev to dev, company to company, is how we structure our project as a whole. whatever, it uses Vue instead of React or Angular. There's also the MEAN stack, which uses Angular instead of React, and the. MERN stands for MongoDB - Express - React - Node. ![]() Let's first get some basics out of the way and context on how I did this: my project structure, basic configuration, and why I chose this way of deployment. So you've got a cool project you'd like to show off to the world, how do we deploy a full-stack MERN app? There are definitely other ways to deploy and other ways people prefer to have their project structured. NOTE: This guide is based on my specific project structure and this works well for it. If this is your first time don't intimidate yourself! Just read and complete each step one at a time. It will be very specific on steps so it's a bit of a read, however, it will ensure there is minimal to no confusion on how to get from point A to point B.įeel free to hop around if you've got some of these steps done, know how to do them already, what have you. This post is intended to be a guide for those that want to deploy a full-stack MERN app. ![]()
0 Comments
Leave a Reply. |