mern-hooks-boilerplate

  • d9_234670
    了解作者
  • 208.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-12 10:54
    上传日期
MERN 样板 | Ironhack 全栈应用 生成项目 解决方案 1 | 使用 Github 模板功能生成项目 单击此页面上的按钮并创建一个新的 GitHub 存储库。 然后,您可以克隆项目并添加server/.env文件,例如使用以下值: PORT=5000 SESSION_SECRET=anyValue MONGODB_URI=mongodb://localhost/mern-project 解决方案2 | 用iron-mern-generator生成项目 如果您想创建一个名为project3网站,您只需在终端中输入: $ npx iron-mern-generator project3 如果要将项目发布到 GitHub,可以键入: $ git remote add origin https://github.com/user/my-project.git 如果另一个人
mern-hooks-boilerplate-master.zip
内容介绍
# MERN boilerplate | Ironhack Fullstack Application - [Generate the project](#generate-the-project) - [Global information](#global-information) - [How to implement a Full Stack feature?](#how-to-implement-a-full-stack-feature) - [Example in the code](#example-in-the-code) - [Deployement on Heroku](#deployement-on-heroku) - [Guideline to create clean code](#guideline-to-create-clean-code) ## Generate the project ### Solution 1 | Generate the project with the Github template feature Click on the button [*Use this template*](https://github.com/mc100s/mern-hooks-boilerplate/generate) on this page and create a new GitHub repository. Then you can clone the project and add a `server/.env` file, with for example the following values: ``` PORT=5000 SESSION_SECRET=anyValue MONGODB_URI=mongodb://localhost/mern-project ``` ### Solution 2 | Generate the project with `iron-mern-generator` If you want to create a MERN website called `project3`, you can simply type in the terminal: ``` $ npx iron-mern-generator project3 ``` If you want to publish the project to GitHub, you can type: ``` $ git remote add origin https://github.com/user/my-project.git ``` If another person wants to clone the project, he has to: - Clone the project - Run `npm install` to install all the dependencies - Add a file `server/.env` file ## Useful commands **To install all the packages** ```sh # Install server and client packages + build the React applicatin $ npm install # OR you can install manually the server and client packages $ (cd server && npm install) $ (cd client && npm install) ``` **To install a package for the server** ```sh $ cd server $ npm install axios ``` **To install a package for the client** ```sh $ cd client $ npm install axios ``` **To run the server and the client** ```sh # Open a first terminal $ npm run dev:server # Run the server on http://localhost:5000/ # Open a second terminal $ npm run dev:client # Run the client on http://localhost:3000/ ``` So now you can go to - http://localhost:5000/api/: A simple API call - http://localhost:5000/: The website based on client/build (that you can update with `$ (cd client && npm run build)`) - http://localhost:3000/: The last version of your React application that is calling your API with the base url "http://localhost:5000/api/" ## Global information ### Directory structure ``` .vscode/ client/ build/ public/ src/ components/ pages/ package.json server/ bin/ configs/ models/ passport/ routes/ app.js middlewares.js package.json .gitignore package.json README.md ``` ## How to implement a Full Stack feature? 1. Implement it in the sever by creating a route and some models if necessary 2. Test it with Postman with many different cases 3. Create a new API method in `client/src/api.js` 4. Consume the API method in your client :) ## Example in the code ### `server/routes/auth.js` - `router.post('/signup')`: Route to create a new user - `router.post('/login')`: Route to send the user JWT - `router.get('/secret')`: Route where the user need to be authenticated ### `server/routes/users.js` - `router.get('/')`: Route to get all users - `router.post('/first-user/pictures')`: Route to add a picture on one user with Cloudinary ### `server/routes/countries.js` - `router.get('/')`: Route to get all countries - `router.post('/')`: Route to add a country ## Deployement on Heroku ### To deploy the first time Create a project on Heroku.com. Here for the demo I named the project "my-ironhack-project". Then, you need to link your Git project with Heroku. ```sh # Replace "my-ironhack-project" by the name of your Heroku project $ heroku git:remote -a my-ironhack-project $ git push heroku master ``` Then you need to create a Mongo database online with MLab. ```sh $ heroku addons:create mongolab:sandbox ``` ### To redeploy You just need to push on `heroku` (don't forget to commit before): ```sh $ git push heroku master ``` ### To execute a seed If you want to execute something on the server, for example a seed, you can use `heroku run`. Example: ``` $ heroku run node server/bin/seeds.js ``` ### To Open MongoLab You can either go on the Heroku project page ("Overview" tab) or type the following command: ``` $ heroku addons:open mongolab ``` ### See the logs ```sh $ heroku logs ``` ## Guideline to create clean code ### Send the right status code Your backend API sends some status code at every request. By default, it will send `200`, which means `OK`, everything went fine. If something bad happened, you should a send a different status code: - **`400` Bad Request**: Something is missing in wrong in the request (eg: missing data). - **`401` Unauthorized**: For missing or bad authentication. - **`403` Forbidden**: When the user is authenticated but isn’t authorized to perform the requested operation on the given resource. - **`404` Not Found**: The resources/route doesn't exist. - **`409` Conflict**: The request couldn't be completed because of a conflict (eg for signup: username already taken). - **`500` Internal Server Error**: The server encountered an unexpected condition which prevented it from fulfilling the request. By sending the right status code, you will catch more easily your error on the client side. **Example on the server side** ```js // If the user is not connected for a protected resource, we can send him this res.status(401).json({ message: "You must be connected" }) ``` **Example on the client side** ```js // Call to api.getSecret() // In case of success, state.secret is saved // In case of error (status code 4xx or 5xx), state.message contains the message from the error api.getSecret() .then(data => this.setState({ secret: data.secret })) .catch(err => this.setState({ message: err.toString() })) ``` <!-- TODO: find a way to check if we are still loggedIn when we load the application -->
评论
    相关推荐
    • MongoDB Introduction
      NULL 博文链接:https://shawjerson-gmail-com.iteye.com/blog/2088827
    • MongoDB Introduction
      NULL 博文链接:https://shawjerson-gmail-com.iteye.com/blog/2088827
    • MongoDB实例
      MongoDB实例源代码 博文链接:https://zuoqiang.iteye.com/blog/1175276
    • Mongodb安装https配置文档
      Mongodb安装https配置文档
    • MongoDB Introduction
      NULL 博文链接:https://shawjerson-gmail-com.iteye.com/blog/2088827
    • MongoDB
      NULL 博文链接:https://rzy.iteye.com/blog/1751347
    • mongoDB
      mongoDB
    • MongoDB
      作者 蒂亚戈·亚历山大·多明格斯·德·苏扎 ...(1)MongoDB文档-写问题-https: (2)的MongoDB CRUD操作- (3)MongoDB文档-模型树结构-https: (4)银行家,凯尔。 运行中的MongoDB。 曼宁出版社,2016年。
    • mongodb总结
      NULL 博文链接:https://hao3721.iteye.com/blog/1841330
    • MongoDB 连接
      NULL 博文链接:https://username2.iteye.com/blog/1574724