A MVC (Model Views Controller) Boilerplate that uses React.js.

This is a MERN stack application which utilizes a MVC (Model Views Controller) architectural pattern. It is designed for the Client Server and API Server to run on two separate ports simultaneously. The boilerplate mostly focuses on the API Server file structure, while the Client Server was created utilizing create-react-app.

The application opens up a standard looking create-react-app landing page.

If you look inside of your application's terminal, you should see a 'Hello World!' output.

If you open your console in Chrome's Dev Tools, you should also see a message from the API server. This is to show that the client has received back information from the API.

This was made for myself to use because I like the file structure. Anyone else is free to use it at their own risk. I do NOT claim any rights to any technologies used. Including, but not limited to: MongoDB, mongoose.js ODM, Express.js, React.js, create-react-app or Node.js.

This application is utilizing a MVC architectural pattern. You can view the flowchart below for details on how to create a route as well as understand how the files relate.

This is designed to be a MERN (MongoDB, Express.js, React.js and Node.js) stack application by example. However, it can easily be converted to a SERN stack by using MySQL and Sequlize.js.

The '/client' was created using create-react-app.

The MERN example utilizes mongoose.js ODM.

The API server utilizes Nodemon, a utility that will monitor for any changes in the source and automatically restart the API server.

The Client and API servers are ran simultaneously using concurrently npm.

Must have Node.js installed to run. If you need to install Node.js, please refer to their website here.

I utilize Yarn as my package manager rather than Node's standard npm. So I will be using yarn commands. But you can easily replace any instance of 'yarn' with 'npm' in your command line.

1. Download the Boilerplate by running the below command in your terminal:

   git clone [email protected]:corey-mitchell/React-MVC-Boilerplate.git
   

2. CD into the application's root directory

   cd React-MVC-Boilerplate
   

3. Once inside of the application's root directory, install the API server's depencencies. To do so, run:

   yarn install
   

4. After your API's dependencies are installed, it's time to install your Client server's dependencies. To do so, cd into the client folder and run yarn install again. Like so:

   cd client
   
   yarn install
   

   • Note - This is done twice because our Client Server and API Server are running on two different ports and have different dependencies. This is to make sure that all dependencies for both servers are installed.

5. Now that all dependencies are installed, its time to head back into the root directory and start it up.

   cd ..
   
   yarn start
   

   • Note - Once you have started the application, there is no need to open it within the browser. The application will automatically start the API server, then start the React Development server. Once the React Development server has compiled, the application will open automatically in the broswer.

Corey Mitchell