Sinn
a blog based on of react,webpack3,dva,redux,material-ui,fetch,generator,markdown,nodejs,koa2,mongoose,docker,shell,and async/await 基于react+koa2技术栈的个人开源博客系统
Overview
sinn is a personal open-source project developed with a technology stack of React, Koa2, and Docker. It aims to create a small community and is currently in its early stages. The project focuses on technology sharing and communication. The live demo can be accessed at http://sinn.boyagirl.com. The source code is available at https://github.com/sessionboy/sinn.
Features
- React front-end technology stack with a focus on componentization and high-performance engineering development patterns.
- Koa2 + MongoDB backend for quick construction of Node.js server services.
- Use of async/await for ultimate asynchronous processing.
- Docker containerized deployment for cutting-edge deployment solutions.
- Use of dllPlugin and commonsChunkPlugin for faster build speeds and smaller file sizes.
- Future plans for more features, such as modularized packaging and optimization, developing an SSR version using React + Node.js, and a GraphQL version using React + GraphQL + Node.js.
- Possible release of a React Native mobile version for Android and iOS, if time allows.
Backend
- Install and run the sinn-server. The source code is available at https://github.com/sessionboy/sinn-server.
- After launching the backend, log in to the management backend and add a primary category under category management. For reference, you can use the test demo at http://servertest.boyagirl.com with the account "sinn" and password "admin".
Frontend
- You can use Git or download the source code directly.
- Install dependencies using npm or yarn. It is recommended to use a Taobao mirror for faster installation.
Setting Up Webpack Proxy (optional)
- For local development, you can set up a proxy to handle cross-domain issues.
- Edit the webpack.dev.js file located at /build/webpack.dev.js with the desired proxy settings.
Deployment
- For development environment: Start the project using npm start.
- For production environment: Build the project using npm run build.
Debugging Redux
- Redux debugging is enabled using dva, which is a package that integrates redux-logger for debugging purposes. By default, it is disabled.
- To enable redux debugging, open the /src/index.js file and uncomment line 24.
Automated Project Deployment
- Use the rsync command to sync the code to the remote server. This method is supported for Unix-based systems such as Mac and Linux.
- For Windows users, use cwrsync with the same command.
- For frontend deployment, it is recommended to use Nginx for deployment. You can refer to the nginx folder for sample configurations.
Summary
sinn is an open-source project developed using a React, Koa2, and Docker technology stack. It is focused on creating a small community for technology sharing and communication. The project offers features such as a high-performance engineering development pattern, rapid backend service construction, asynchronous processing, containerized deployment, faster build speeds, and smaller file sizes. Future plans include modularized packaging and optimization, as well as the development of an SSR version and a GraphQL version. The project also implements dva for Redux integration and uses material-ui as a UI library.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Blog
Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.
- Docker
A website that uses Docker for containerization to streamline development, testing, and deployment workflows. This includes features such as containerization of dependencies, automated builds and deployments, and container orchestration to ensure scalability and availability.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.