# react-boilerplate-test_1
**Repository Path**: toby11111/react-boilerplate-test_1
## Basic Information
- **Project Name**: react-boilerplate-test_1
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-06-07
- **Last Updated**: 2024-06-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Start your next react project in seconds
A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices
## CICD 指南
### Gitee 准备工作
#### 1. 在 Gitee 上新建仓库或者从 GitHub 上导入现有仓库
点击展开
- 点击新建仓库,选择点击导入 
- 选择从 URL 导入 - 输入 Git 仓库 URL `https://github.com/react-boilerplate/react-boilerplate` - 如果仓库名称已存在,请更改仓库名称 - 点击导入

- 按照提示下载代码,如果第一次配置 SSH,按照提示配置公钥私钥 
#### 2. 在 Gitee 个人设置中创建私人令牌
点击展开
- 在个人设置中点击私人令牌 
- 点击生成新令牌,选择令牌的权限范围。对于 Jenkins 访问,通常需要如下权限: - projects: 读取你的项目信息 - pull_requests: 读取和创建合并请求 - hook: 读取和管理 WebHooks

- 点击"提交"按钮,在弹窗中输入 Gitee 密码,生成令牌。请把令牌复制下来,妥善保存。
- 注意: 令牌只会显示一次,如果丢失,需要重新生成。
### Jenkins 准备工作
#### 1. 本地安装初始化 Jenkins
点击展开
- 下载安装 Jenkins
- 下载 Jenkins war 安装包
- [Jenkins war](http://mirrors.jenkins.io/war-stable/latest/jenkins.war)
- Jenkins 可以作为一个独立的应用程序在任何机器上运行, 只需要有 Java 运行环境。
- 启动 Jenkins
- 在命令行中输入以下命令启动 Jenkins:
- `java -jar jenkins.war --httpPort=9090`
- 这里指定 Jenkins 运行端口为 9090, 可以根据实际情况进行修改
- 从命令行里获取密码, 打开 `http://localhost:9090`, 输入密码
- 在浏览器中打开 `http://localhost:9090`, 输入上面获取到的密码, 即可进入 Jenkins 安装配置界面
- 
- 根据网络情况安装插件, 如果网络条件好, 选择 `Install suggested plugins`, 如果网络不好, 选择 `select plugins to install`, 在里面只选择 `git` 进行安装
- 
- 创建 Admin 账户
- 插件安装完成后, 就可以进入创建管理员账户的界面了, 输入管理员的用户名、密码、邮箱等信息,
- 
- 下一步会进入 Configure Jenkins 的界面, 这里可以配置 Jenkins 的 URL。除非我们需要修改端口, 否则直接保持默认配置即可。点击 "save and finish" 保存完成
- 完成配置
点击展开
- 
#### 2. 安装并配置 Gitee 插件
点击展开
- 安装 Gitee 插件
- 在 Jenkins 主页, 点击 "Manage Jenkins"。
- 点击 "Manage Plugins"。
- 点击 "Available" 标签, 然后在过滤器中输入 "Gitee"。
- 勾选 "Gitee" 插件, 然后点击 "Install" 按钮。
- 配置 Gitee 插件
- 在 Jenkins 的主页, 点击 "Manage Jenkins"。在管理页面, 点击 Configure 中的 System
- 滚动页面, 到 "Gitee Plugin Configuration" 部分。
- 在 "Gitee Host URL" 字段, 输入 `https://gitee.com`
- 点击 "Add" 按钮, 选择 "Gitee API Token"。
- 在 "API Token" 字段, 输入你在步骤 1 中生成的私人令牌。
- 
- 在 "ID" 字段, 输入一个唯一的标识符, 如 "gitee-token"。这个 ID 将在 Jenkins 的其他部分用于引用这个令牌。
- 点击 "Add" 按钮
- 点击 "Test Connection" 按钮, 测试 Jenkins 是否可以使用这个令牌连接到 Gitee。如果一切正常, 你会看到 "Success" 的信息
- 点击 "Save" 按钮, 保存 Jenkins 的全局配置
#### 3. 安装 Blue Ocean 插件
点击展开
- Blue Ocean 是 Jenkins 的一个新的用户界面, 提供了更加现代和友好的界面
- 在 Jenkins 主页, 点击 "Manage Jenkins"。
- 点击 "Manage Plugins"。
- 点击 "Available" 标签, 然后在过滤器中输入 "Blue Ocean"。
- 勾选 "Blue Ocean" 插件, 然后点击 "Install" 按钮。
### 创建 Pipeline
点击展开
- 点击 "New Item" 创建新项目, 输入项目名称, 选择 "Pipeline", 然后点击 "OK"

- 在 "Build Triggers" 中选择 "Poll SCM", 并输入 `* * * * *` 来设置每分钟检查一次代码库的变化

- 在 pipeline 的 script 部分输入以下代码, 请替换 `userRemoteConfigs` 中的 `url`, 然后点击 "Apply"
```bash
pipeline {
agent any
triggers {
pollSCM('* * * * *')
}
stages {
stage('Checkout') {
steps {
checkout([$class: 'GitSCM', branches: [[name: '*/master']],
userRemoteConfigs: [[url: 'https://gitee.com/dj3619/react-boilerplate-test']]])
}
}
stage('Test') {
steps {
sh 'npm ci && npm run test'
}
}
stage('Build') {
steps {
sh 'npm ci && npm run build'
}
}
stage('Deploy') {
steps {
sh '''
#!/bin/bash
# 进入项目目录
cd $WORKSPACE
# 停止旧版本的应用(如果正在运行)
pm2 stop myapp || true
# 启动新版本的应用
pm2 start npm --name "myapp" -- start
'''
}
}
}
}
## CICD Guide
### Gitee Preparation
#### 1. Create a new repository on Gitee or import an existing one from GitHub
Click to expand
- Click on "New Repository" and select "Import"

- Choose to import from a URL - Enter the Git repository URL `https://github.com/react-boilerplate/react-boilerplate` - If the repository name already exists, please change it - Click "Import"

- Follow the instructions to download the code. If configuring SSH for the first time, set up the public and private keys as prompted 
#### 2. Create a personal access token in Gitee settings
Click to expand
- Go to personal settings and click on "Personal Access Tokens" 
- Click "Generate New Token" and select the token scope. For Jenkins access, the following permissions are typically required: - projects: Read your project information - pull_requests: Read and create merge requests - hook: Read and manage WebHooks

- Click "Submit", enter your Gitee password in the popup, and generate the token. Please copy and securely store the token.
- Note: The token will only be displayed once. If lost, you will need to regenerate it.
### Jenkins Preparation
#### 1. Local Installation and Initialization of Jenkins
Click to expand
- Install Jenkins
- Download the Jenkins war package
- [Jenkins war](http://mirrors.jenkins.io/war-stable/latest/jenkins.war)
- Jenkins can run as a standalone application on any machine with a Java runtime environment.
- Start Jenkins
- Run the following command in the command line to start Jenkins:
- `java -jar jenkins.war --httpPort=9090`
- This specifies that Jenkins will run on port 9090, but you can change it as needed.
- Obtain the initial admin password from the command line and open `http://localhost:9090`, entering the password
- Open `http://localhost:9090` in your browser and enter the obtained password to access the Jenkins setup page
- 
- Install plugins based on your network conditions. If the network is good, choose `Install suggested plugins`. If not, select `select plugins to install` and only install `git`.
- 
- Create an Admin account
- After plugin installation, create the admin account by entering a username, password, email, etc.
- 
- Configure Jenkins URL in the next step. Unless you need to change the port, keep the default configuration and click "save and finish".
- Complete the setup
Click to expand
- 
#### 2. Install and Configure the Gitee Plugin
Click to expand
- Install the Gitee Plugin
- On the Jenkins homepage, click "Manage Jenkins".
- Click "Manage Plugins".
- Go to the "Available" tab and enter "Gitee" in the filter.
- Select the "Gitee" plugin and click "Install".
- Configure the Gitee Plugin
- On the Jenkins homepage, click "Manage Jenkins". In the management page, click Configure System
- Scroll to the "Gitee Plugin Configuration" section.
- Enter `https://gitee.com` in the "Gitee Host URL" field.
- Click "Add" and select "Gitee API Token".
- Enter the personal access token generated in Step 1 in the "API Token" field.
- 
- Enter a unique identifier, such as "gitee-token", in the "ID" field. This ID will be used in other parts of Jenkins to reference this token.
- Click "Add".
- Click "Test Connection" to ensure Jenkins can connect to Gitee using the token. If successful, you will see a "Success" message.
- Click "Save" to save the global Jenkins configuration.
#### 3. Install the Blue Ocean Plugin
Click to expand
- Blue Ocean is a new Jenkins interface that provides a more modern and user-friendly experience.
- On the Jenkins homepage, click "Manage Jenkins".
- Click "Manage Plugins".
- Go to the "Available" tab and enter "Blue Ocean" in the filter.
- Select the "Blue Ocean" plugin and click "Install".
### Setting Up a Pipeline
Click to expand
- Click on "New Item" to create a new project, enter the project name, select "Pipeline", and click "OK"

- In the "Build Triggers" section, select "Poll SCM" and enter `* * * * *` to check the repository for changes every minute

- In the script section of the pipeline, enter the following code, replacing the `url` in `userRemoteConfigs`, then click "Apply"
```bash
pipeline {
agent any
triggers {
pollSCM('* * * * *')
}
stages {
stage('Checkout') {
steps {
checkout([$class: 'GitSCM', branches: [[name: '*/master']],
userRemoteConfigs: [[url: 'https://gitee.com/dj3619/react-boilerplate-test']]])
}
}
stage('Test') {
steps {
sh 'npm ci && npm run test'
}
}
stage('Build') {
steps {
sh 'npm ci && npm run build'
}
}
stage('Deploy') {
steps {
sh '''
#!/bin/bash
# Enter the project directory
cd $WORKSPACE
# Stop the old version of the application (if running)
pm2 stop myapp || true
# Start the new version of the application
pm2 start npm --name "myapp" -- start
'''
}
}
}
}
---
## Features
- Quick scaffolding
- Create components, containers, routes, selectors and sagas - and their tests - right from the CLI!
- Instant feedback
- Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!
- Predictable state management
- Unidirectional data flow allows for change logging and time travel debugging.
- Next generation JavaScript
- Use template strings, object destructuring, arrow functions, JSX syntax and more.
- Next generation CSS
- Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the specificity low while eliminating style clashes. Ship only the styles that are on the page for the best performance.
- Industry-standard routing
- It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.
- Industry-standard i18n internationalization support
- Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.
- Offline-first
- The next frontier in performant web apps: availability without a network connection from the instant your users load the app.
- Static code analysis
- Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.
- SEO
- We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)
But wait... there's more!
- _The best test setup:_ Automatically guarantee code quality and non-breaking
changes. (Seen a react app with 100% test coverage before?)
- _Native web app:_ Your app's new home? The home screen of your users' phones.
- _The fastest fonts:_ Say goodbye to vacant text.
- _Stay fast_: Profile your app's performance from the comfort of your command
line!
- _Catch problems:_ AppVeyor and TravisCI setups included by default, so your
tests get run automatically on Windows and Unix.
There’s also a fantastic video on how to structure your React.js apps with scalability in mind. It provides rationale for the majority of boilerplate's design decisions.
Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, `styled-components`, redux-saga, FontFaceObserver
## Quick start
1. Make sure that you have Node.js v8.15.1 and npm v5 or above installed.
2. Clone this repo using `git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git `
3. Move to the appropriate directory: `cd `.
4. Run `npm run setup` in order to install dependencies and clean the git repo.
_At this point you can run `npm start` to see the example app at `http://localhost:3000`._
5. Run `npm run clean` to delete the example app.
Now you're ready to rumble!
## Documentation
- [**The Hitchhiker's Guide to `react-boilerplate`**](docs/general/introduction.md): An introduction for newcomers to this boilerplate.
- [Overview](docs/general): A short overview of the included tools
- [**Commands**](docs/general/commands.md): Getting the most out of this boilerplate
- [Testing](docs/testing): How to work with the built-in test harness
- [Styling](docs/css): How to work with the CSS tooling
- [Your app](docs/js): Supercharging your app with Routing, Redux, simple
asynchronicity helpers, etc.
- [**Troubleshooting**](docs/general/gotchas.md): Solutions to common problems faced by developers.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## Supporters
This project would not be possible without the support of these amazing folks. [**Become a sponsor**](https://opencollective.com/react-boilerplate) to get your company in front of thousands of engaged react developers and help us out!
---
## License
This project is licensed under the MIT license, Copyright (c) 2019 Maximilian
Stoiber. For more information see `LICENSE.md`.