fullstack-taro-app-template

Full-Stack Taro Application Template

This repository is a full-stack sample mini program based on Taro that creates a simple extended architecture(eg. unit testing), and provides the foundational services, components, and plumbing needed to get a basic application up and running.

English Documentation | 中文版说明文档

File Structures

fullstack-taro-app-template/
├── README.md
├── LICENSE
├── project.config.json        # Mini Program Project Configuration
├── project.tt.json
├── babel.config.js
├── tsconfig.json
├── global.d.ts
├── package-lock.json
├── package.json                # Node.js manifest
├── test/                       # Unit Testing Directory
├── dist/                       # Packaged Directory
├── config                      # Compile configuration directory
│   ├── dev.js                  # Development Mode Configuration
│   ├── index.js                # Default Configuration
│   └── prod.js                 # Production Mode Configuration
├── src
│   ├── app.config.ts           # Global Configuration
│   ├── app.scss                # Global CSS
│   ├── app.tsx                 # Entry Component
│   ├── index.html              # H5 Entry HTML
│   └── pages                   # Page Component
│       └── index
│           ├── index.config.ts # Page Configuration
│           ├── index.scss      # Page CSS
│           └── index.jsx       # Page Component,If the Vue project, this file is index.vue
└──

Installation And Test

Step 1. Clone the repo to get all source files including build scripts:

$ git clone git://github.com/xizon/fullstack-taro-app-template.git

Step 2. First, using an absolute path into your "fullstack-taro-app-template/" folder directory.

$ cd /{your_directory}/fullstack-taro-app-template

Step 3. Before doing all dev stuff make sure you have Node 14+ installed. After that, run the following code in the main directory to install the node module dependencies.

$ sudo npm install

Step 4. Test the application, such as the command

$ npm run dev:h5
$ npm run build:h5

Step 5 (Optional). Unit Testing

$ npm run test

Configuration process of Taro development environment

Step 1. You will need to have node, Taro CLI setup on your machine.

# Install Node globally
$ curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
$ sudo yum install -y nodejs
$ node -v

# Install Taro CLI globally
$ sudo npm i -g @tarojs/cli
$ taro -v

Step 2. Install the Taro template

$ cd /{your_directory}
$ sudo taro init

🍗 With self-configured scaffolding, you need to proceed as follows:

Step 1. Install taro's development dependencies

Taro (with react, typescript, sass, mobx) dependencies required for development.

# Remove old possibly conflicting or unnecessary packages:
$ npm uninstall webpack webpack-cli @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-react @babel/preset-typescript css-minimizer-webpack-plugin mini-css-extract-plugin moment node-sass babel-loader css-loader raw-loader style-loader glslify-loader json-loader sass-loader react-test-renderer terser-webpack-plugin

$ npm install @babel/runtime @tarojs/runtime @tarojs/taro @tarojs/components @tarojs/plugin-framework-react @tarojs/react mobx mobx-react react react-dom --save

$ npm install @types/webpack-env @types/react @tarojs/mini-runner @tarojs/webpack-runner @babel/core babel-preset-taro eslint eslint-config-taro eslint-plugin-react eslint-plugin-import eslint-plugin-react-hooks stylelint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Step 2. Copy the file generated by the template:

• project.config.json
• project.tt.json
• global.d.ts
• config/*

Step 3. Refer to the official generated taro template to modify your own configuration files:

• package.json (from .eslintrc.js and package.json)
• tsconfig.json (from tsconfig.jsonn)
• babel.config.js (from babel.config.js)

Changelog

= 0.0.1 (February 15, 2022) =

• First release.

Contributing

• React
• Mobx
• Taro

Supported development environment

• Taro 3 +
• React 17 +
• TypeScript 4.x.x +
• Jest 27.x.x

Licensing

Licensed under the MIT.