Independent team app setup - React.js教程

- [Instructor] Before setting up your Team-Applications ensure you have the fluent perquisite sites. Node JS and NPM/Yarn for managing dependencies and scripts. Git for version control, understanding of Webpack to help you unbundling and model federation, a shared repository structure for easier collaboration and integration later. Each team should start by creating their own repository. Initialize the repository using GitHub to create a new report or whichever version control. Set up the folder structure, define its standard structure for consistency, and then install the required dependencies. Looking at this structure, you need to run NPM init to be able to run any NPM command in your folder. The first thing to create is a folder, which is Team-A and then inside the Team-A, run NPM init so that it'll initialize a package.json file, then create a public directory and in the public directory create index.html that has the head, the title, the body and the closing tags respectively. In the SRC, which you need to create, create the SRC directory and inside the SRC directory, create a component directory that will house all your components. A styles directory that will house all your styles. Then in the root of the SRC directory, create your app.jsx, because you'll be using React. Also create bootstrap.js and set the configuration of a React application importing via importing the app from app.jsx. Also create index.js, that imports the bootstrap file. After that, you need to install some things. You need to install React, and ReactDOM. Then you'll install Babel Core, Babel Preset ENV and then Babel preset React as well as Babel loader. And this is what helps you to load React. Also, you need to install Webpack, Webpack CLI, Webpack Dev Server, and also HTML Webpack plugin. You also need to install style loader and CSS loader. This is what loads your stylings for your application. Once all of this is done, you create a Webpack.config.js file and set up the configuration for HTML Webpack plugin and then module federation plugin. Create your entry point, set your mode development, then create the port and add the edits, which is to accept cross origin. Also add your output file, put it into auto, during production, you can change this to the respective URL, which you'll see in the future. Then resolve extensions of JavaScript and jsx and how would that be loaded? That will be undo by Babel loader and also Babel preset React and Babel preset ENV. For your styling, style loader and CSS loader will undo that. Also, to resolve your remote, you need to create the new modification plugin, create add the name for your file, the file name, and then what are you exposing, which is the app. Then share the dependencies to avoid multiple loading, which is React and ReactDOM. Then the HTML template that you'll be using to serve your file is inside the public folder and the file name is index.html. Once all of this is being set up, you are good to test your file and all you need to do is configure your package.json to have a start and a build script, one for development and the other for production. If you notice my package.json, it is continue all what you installed. After this, the next command to run to test your configuration is NPM start. Let's check what is in our app.jsx Team A App Setup and let add a paragraph and say, you are welcome. Perfect, if this is refreshed, you are welcome. To maintain consistency across Team-Applications is crucial to define shared standard and dependencies. This can include shared libraries. That involves the team using a common library for a visible components like design system. Also, you can use tools like Osci, Eslint and Prettier to enforce coding standards. Create a Readme.MD file in each repository to document set up instructions, coding standards, and integration steps. Here are some best practices for setting up independent Team-Application. Each repository should contain only the code relevant to its domain. Use semantic versioning for shared libraries and component to ensure compatibility. Set up units and integration tests to cache issues very heavily in the development. Provide clear documentation for set up, integration and deployment. Setting up independent team involves creating separate depositories for each micro frontend configuring Webpack with Model Federation for integration, defining standards and dependencies to ensure consistency. Testing the app locally to confirm its runs independently. This allows teams to work autonomously while maintaining alignment with the overhaul projects.