|
1 |
| -##_**DISCLAIMER**_ |
2 |
| -This project has moved maintainers and is no longer developed here. The up to date template can be found [here](https://github.com/rennemannd/MERN-Template). |
3 |
| - |
4 |
| -#### _**IMPORTANT NOTE**_ - |
5 |
| -This project does not have a mongoDB connection setup. Setup the connection based on the environments below. |
6 |
| -- local development: create a config file (make sure to name it config.js) in the config folder, which exports your db.uri connection. An example is provided, config/config.example.js. This file will be ignored by git so your db credentials will be kept safe when the app is deployed. |
7 |
| -- production: Since the config file is not pushed when you deploy your app, you must specifiy your db uri in heorku. Set the uri in heroku as specified in [this](https://devcenter.heroku.com/articles/config-vars) resource. Make sure you name the environement variable "DB_URI". |
8 |
| - |
9 |
| -## Getting Started |
10 |
| -This repository aims to assist you in beginning work on a MERN stack application with a solid file structure as a foundation. To get started make a copy of this template repo for your project teams. |
11 |
| - |
12 |
| -Since this project will hold both the client application and the server application there will be node modules in two different places. First run `npm install` from the root. After this you will run `npm run-script install-all` from the root. From now on run this command anytime you want to install all modules again. This is a script we have defined in package.json . |
13 |
| - |
14 |
| -This app can be deployed directly to heroku since there is a script defined in package.json which will automatically handle building and deploying the app. For more information on deploying to heroku reference the extra resources at the bottom of this file. |
15 |
| - |
16 |
| -## File structure |
17 |
| -#### `client` - Holds the client application |
18 |
| -- #### `public` - This holds all of our static files |
19 |
| -- #### `src` |
20 |
| - - #### `assets` - This folder holds assets such as images, docs, and fonts |
21 |
| - - #### `components` - This folder holds all of the different components that will make up our views |
22 |
| - - #### `views` - These represent a unique page on the website i.e. Home or About. These are still normal react components. |
23 |
| - - #### `App.js` - This is what renders all of our browser routes and different views |
24 |
| - - #### `index.js` - This is what renders the react app by rendering App.js, should not change |
25 |
| -- #### `package.json` - Defines npm behaviors and packages for the client |
26 |
| -#### `server` - Holds the server application |
27 |
| -- #### `config` - This holds our configuration files, like mongoDB uri |
28 |
| -- #### `controllers` - These hold all of the callback functions that each route will call |
29 |
| -- #### `models` - This holds all of our data models |
30 |
| -- #### `routes` - This holds all of our HTTP to URL path associations for each unique url |
31 |
| -- #### `tests` - This holds all of our server tests that we have defined |
32 |
| -- #### `server.js` - Defines npm behaviors and packages for the client |
33 |
| -#### `package.json` - Defines npm behaviors like the scripts defined in the next section of the README |
34 |
| -#### `.gitignore` - Tells git which files to ignore |
35 |
| -#### `README` - This file! |
36 |
| - |
37 |
| - |
38 |
| -## Available Scripts |
39 |
| - |
40 |
| -In the project directory, you can run: |
41 |
| - |
42 |
| -### `npm run-script dev` |
43 |
| - |
44 |
| -Runs both the client app and the server app in development mode.<br> |
45 |
| -Open [http://localhost:3000](http://localhost:3000) to view the client in the browser. |
46 |
| - |
47 |
| -### `npm run-script client` |
48 |
| - |
49 |
| -Runs just the client app in development mode.<br> |
50 |
| -Open [http://localhost:3000](http://localhost:3000) to view the client in the browser. |
51 |
| - |
52 |
| - |
53 |
| -### `npm run-script server` |
54 |
| - |
55 |
| -Runs just the server in development mode.<br> |
56 |
| - |
57 |
| - |
58 |
| -### `npm run build` |
59 |
| - |
60 |
| -Builds the app for production to the `build` folder.<br> |
61 |
| -It correctly bundles React in production mode and optimizes the build for the best performance. |
62 |
| - |
63 |
| -If deploying to heroku this does not need to be run since it is handled by the heroku-postbuild script<br> |
64 |
| - |
65 |
| -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
66 |
| - |
67 |
| -## Learn More |
68 |
| - |
69 |
| -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). |
70 |
| - |
71 |
| -To learn how to setup a local MongoDB instance for testing, check out how to [Connect to MongoDB](https://docs.mongodb.com/guides/server/drivers/). |
72 |
| - |
73 |
| -To learn how to deploy a full-stack web app to heroku, check out [this great guide](https://daveceddia.com/deploy-react-express-app-heroku/). |
74 |
| - |
75 |
| -To learn React, check out the [React documentation](https://reactjs.org/). |
76 |
| - |
77 |
| -### `npm run build` fails to minify |
78 |
| - |
79 |
| -This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify |
| 1 | +@copyright by becodemy 2023 |
0 commit comments