3ree 开源项目教程

3ree 开源项目教程

3reeAn example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript.项目地址:https://gitcode.com/gh_mirrors/3r/3ree

1. 项目的目录结构及介绍

3ree 项目的目录结构如下：

3ree/
├── config/
│   ├── default.js
│   ├── development.js
│   ├── production.js
│   └── test.js
├── migrations/
├── models/
├── public/
├── routes/
├── seeders/
├── server/
│   ├── middleware/
│   ├── utils/
│   └── index.js
├── src/
│   ├── actions/
│   ├── components/
│   ├── constants/
│   ├── containers/
│   ├── reducers/
│   ├── store/
│   └── index.js
├── tests/
├── .babelrc
├── .env
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• config/: 包含不同环境的配置文件。
• migrations/: 数据库迁移文件。
• models/: 数据库模型文件。
• public/: 静态文件目录。
• routes/: 路由文件。
• seeders/: 数据库种子文件。
• server/: 后端服务相关文件。
• src/: 前端源代码文件。
• tests/: 测试文件。
• .babelrc: Babel 配置文件。
• .env: 环境变量文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 server/index.js 和 src/index.js。

server/index.js

这是后端服务的入口文件，主要负责启动 Express 服务器，并连接数据库。

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const config = require('../config');
const routes = require('../routes');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

mongoose.connect(config.database.uri, { useNewUrlParser: true, useUnifiedTopology: true });

app.use('/api', routes);

app.listen(config.server.port, () => {
  console.log(`Server is running on port ${config.server.port}`);
});

src/index.js

这是前端应用的入口文件，主要负责渲染 React 应用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import store from './store';
import App from './containers/App';

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

3. 项目的配置文件介绍

项目的配置文件主要位于 config/ 目录下。

config/default.js

默认配置文件，包含一些基本配置。

module.exports = {
  server: {
    port: process.env.PORT || 3000,
  },
  database: {
    uri: process.env.DATABASE_URI || 'mongodb://localhost:27017/3ree',
  },
};

config/development.js

开发环境配置文件，可以覆盖默认配置。

module.exports = {
  server: {
    port: 3001,
  },
  database: {
    uri: 'mongodb://localhost:27017/3ree_dev',
  },
};

config/production.js

生产环境配置文件，可以覆盖默认配置。

module.exports = {
  server: {
    port: process.env.PORT || 80,
  },
  database: {
    uri: process.env.DATABASE_URI,
  },
};

config/test.js

测试环境配置文件，可以覆盖默认配置。

module.exports = {
  server: {
    port: 3002,
  },
  database: {
    uri: 'mongodb://localhost:27017/3ree_test',
  },
};

这些配置文件通过 config 模块加载，根据环境变量选择相应的配置文件。

3reeAn example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript.项目地址:https://gitcode.com/gh_mirrors/3r/3ree