Skip to content
This repository was archived by the owner on Oct 10, 2023. It is now read-only.

Commit 9ee5b17

Browse files
SaiCharanMahadevanSai
andauthored
misc: rebase antd changes on latest CRA tag v3.4.1 (#4)
* feat: add babel-import-plugin + less loaders to support dynamic imports of antd comps * misc: update package to pelago-react-scripts * refactor: add comments * feat: add plugin to switch momentjs with dayjs for antd comps * misc: rebase antd changes on latest CRA tag v3.4.1 * misc: update the CRA and react-scripts readme * misc: update parent readme Co-authored-by: Sai <[email protected]>
1 parent d2f813f commit 9ee5b17

File tree

5 files changed

+15275
-218
lines changed

5 files changed

+15275
-218
lines changed

README.md

Lines changed: 5 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,213 +1,11 @@
1-
# Create React App [![Build Status](https://dev.azure.com/facebook/create-react-app/_apis/build/status/facebook.create-react-app?branchName=master)](https://dev.azure.com/facebook/create-react-app/_build/latest?definitionId=1&branchName=master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md)
1+
# Pelago Create React App
22

3-
Create React apps with no build configuration.
3+
This is a fork of the actual [Create React App](https://create-react-app.dev/) aimed at providing the necessary flexibility needed without losing support from CRA by ejecting it or using wrappers that internally eject CRA like [customize-cra](https://github.com/arackaf/customize-cra)
44

5-
- [Creating an App](#creating-an-app) – How to create a new app.
6-
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
7-
8-
Create React App works on macOS, Windows, and Linux.<br>
9-
If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).<br>
10-
If you have questions or need help, please ask in our [Spectrum](https://spectrum.chat/create-react-app) community.
5+
Currently the app is forked off the `create-react-app v3.4.1`
116

127
## Quick Overview
138

14-
```sh
15-
npx create-react-app my-app
16-
cd my-app
17-
npm start
18-
```
19-
20-
If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that npx always uses the latest version.
21-
22-
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
23-
24-
Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
25-
When you’re ready to deploy to production, create a minified bundle with `npm run build`.
26-
27-
<p align='center'>
28-
<img src='https://cdn.jsdelivr.net/gh/facebook/create-react-app@27b42ac7efa018f2541153ab30d63180f5fa39e0/screencast.svg' width='600' alt='npm start'>
29-
</p>
30-
31-
### Get Started Immediately
32-
33-
You **don’t** need to install or configure tools like webpack or Babel.<br>
34-
They are preconfigured and hidden so that you can focus on the code.
35-
36-
Create a project, and you’re good to go.
37-
38-
## Creating an App
39-
40-
**You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
41-
42-
To create a new app, you may choose one of the following methods:
43-
44-
### npx
45-
46-
```sh
47-
npx create-react-app my-app
48-
```
49-
50-
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
51-
52-
### npm
53-
54-
```sh
55-
npm init react-app my-app
56-
```
57-
58-
_`npm init <initializer>` is available in npm 6+_
59-
60-
### Yarn
61-
62-
```sh
63-
yarn create react-app my-app
64-
```
65-
66-
_[`yarn create <starter-kit-package>`](https://yarnpkg.com/lang/en/docs/cli/create/) is available in Yarn 0.25+_
67-
68-
It will create a directory called `my-app` inside the current folder.<br>
69-
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
70-
71-
```
72-
my-app
73-
├── README.md
74-
├── node_modules
75-
├── package.json
76-
├── .gitignore
77-
├── public
78-
│ ├── favicon.ico
79-
│ ├── index.html
80-
│ └── manifest.json
81-
└── src
82-
├── App.css
83-
├── App.js
84-
├── App.test.js
85-
├── index.css
86-
├── index.js
87-
├── logo.svg
88-
└── serviceWorker.js
89-
```
90-
91-
No configuration or complicated folder structures, only the files you need to build your app.<br>
92-
Once the installation is done, you can open your project folder:
93-
94-
```sh
95-
cd my-app
96-
```
97-
98-
Inside the newly created project, you can run some built-in commands:
99-
100-
### `npm start` or `yarn start`
101-
102-
Runs the app in development mode.<br>
103-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
104-
105-
The page will automatically reload if you make changes to the code.<br>
106-
You will see the build errors and lint warnings in the console.
107-
108-
<p align='center'>
109-
<img src='https://cdn.jsdelivr.net/gh/marionebl/create-react-app@9f6282671c54f0874afd37a72f6689727b562498/screencast-error.svg' width='600' alt='Build errors'>
110-
</p>
111-
112-
### `npm test` or `yarn test`
113-
114-
Runs the test watcher in an interactive mode.<br>
115-
By default, runs tests related to files changed since the last commit.
116-
117-
[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests)
118-
119-
### `npm run build` or `yarn build`
120-
121-
Builds the app for production to the `build` folder.<br>
122-
It correctly bundles React in production mode and optimizes the build for the best performance.
123-
124-
The build is minified and the filenames include the hashes.<br>
125-
126-
Your app is ready to be deployed.
127-
128-
## User Guide
129-
130-
You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/).
131-
132-
## How to Update to New Versions?
133-
134-
Please refer to the [User Guide](https://facebook.github.io/create-react-app/docs/updating-to-new-releases) for this and other information.
135-
136-
## Philosophy
137-
138-
- **One Dependency:** There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
139-
140-
- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
141-
142-
- **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
143-
144-
## What’s Included?
145-
146-
Your environment will have everything you need to build a modern single-page React app:
147-
148-
- React, JSX, ES6, TypeScript and Flow syntax support.
149-
- Language extras beyond ES6 like the object spread operator.
150-
- Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes.
151-
- A fast interactive unit test runner with built-in support for coverage reporting.
152-
- A live development server that warns about common mistakes.
153-
- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
154-
- An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `[email protected]` and higher_)
155-
- Hassle-free updates for the above tools with a single dependency.
156-
157-
Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together.
158-
159-
The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration.
160-
161-
## Popular Alternatives
162-
163-
Create React App is a great fit for:
164-
165-
- **Learning React** in a comfortable and feature-rich development environment.
166-
- **Starting new single-page React applications.**
167-
- **Creating examples** with React for your libraries and components.
168-
169-
Here are a few common cases where you might want to try something else:
170-
171-
- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html).
172-
173-
- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html).
174-
175-
- If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/).
176-
177-
- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles.
178-
179-
- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time.
180-
181-
- Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/).
182-
183-
All of the above tools can work with little to no configuration.
184-
185-
If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html).
186-
187-
## React Native
188-
189-
Looking for something similar, but for React Native?<br>
190-
Check out [Expo CLI](https://github.com/expo/expo-cli).
191-
192-
## Contributing
193-
194-
We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started.
195-
196-
## Credits
197-
198-
This project exists thanks to all the people who [contribute](CONTRIBUTING.md).<br>
199-
<a href="https://github.com/facebook/create-react-app/graphs/contributors"><img src="https://opencollective.com/create-react-app/contributors.svg?width=890&button=false" /></a>
200-
201-
Thanks to [Netlify](https://www.netlify.com/) for hosting our documentation.
202-
203-
## Acknowledgements
204-
205-
We are grateful to the authors of existing related projects for their ideas and collaboration:
206-
207-
- [@eanplatter](https://github.com/eanplatter)
208-
- [@insin](https://github.com/insin)
209-
- [@mxstbr](https://github.com/mxstbr)
210-
211-
## License
9+
This fork is primarily aimed at exposing one specific package in the repo - `react-scripts`. In future we may go the route of just forking `react-scripts` as a git submodule or a similar approach if there is a clear way to keep updated with the original repo.
21210

213-
Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE).
11+
Please head to `packages/react-scripts/README.md` to know more about the setup, dev worflow and other information about our version of `react-scripts`

packages/react-scripts/README.md

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,35 @@
1-
# react-scripts
1+
# pelago-react-scripts
22

3-
This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
4-
Please refer to its documentation:
3+
This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app) with custom modifications for Pelago.<br>
54

6-
- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
7-
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
5+
## Usage
6+
7+
Replace the `react-scripts` dependency on your respective app's `package.json` file with `pelago-react-scripts` before doing a `yarn install`
8+
9+
## Customizations
10+
11+
- Support dynamic imports for antd component stylesheets
12+
- Replace momentjs with dayjs for antd components that need a datetime library ( eg. DatePicker )
13+
- Add less-loader to support .less and .module.less files
14+
15+
## Third party modules / plugins
16+
17+
- less-loader
18+
- babel-plugin-import
19+
- antd-dayjs-webpack-plugin
20+
21+
## Development setup and workflow
22+
23+
Currently the repo has the following remotes setup
24+
25+
- origin ([email protected]:V287/create-react-app.git) - To keep track of updates made on the repo like any normal repo
26+
- upstream ([email protected]:facebook/create-react-app.git) - To rebase the latest stable release of CRA with master
27+
28+
To rebase with upstream:
29+
30+
- Run `git fetch --tags` to get the latest tags from the respective heads.
31+
- Run `git rebase --onto {latest-tag} {your-branch-name}` and raise a PR.
32+
33+
## Releasing
34+
35+
This package has to be bundled and shipped as an npm module. Currently the package is under @sai.mahadevan's account. We will eventually move it to a common pelago account.

packages/react-scripts/config/webpack.config.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const getClientEnvironment = require('./env');
3232
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
3333
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
3434
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
35+
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
3536
// @remove-on-eject-begin
3637
const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
3738
// @remove-on-eject-end
@@ -57,6 +58,8 @@ const useTypeScript = fs.existsSync(paths.appTsConfig);
5758
// style files regexes
5859
const cssRegex = /\.css$/;
5960
const cssModuleRegex = /\.module\.css$/;
61+
const lessRegex = /\.less$/;
62+
const lessModuleRegex = /\.module\.less$/;
6063
const sassRegex = /\.(scss|sass)$/;
6164
const sassModuleRegex = /\.module\.(scss|sass)$/;
6265

@@ -409,6 +412,15 @@ module.exports = function(webpackEnv) {
409412
),
410413
// @remove-on-eject-end
411414
plugins: [
415+
// Support dynamic importing of antd components
416+
[
417+
'import',
418+
{
419+
libraryName: 'antd',
420+
libraryDirectory: 'es',
421+
style: true, // style: true for 'less' support
422+
},
423+
],
412424
[
413425
require.resolve('babel-plugin-named-asset-import'),
414426
{
@@ -535,6 +547,39 @@ module.exports = function(webpackEnv) {
535547
'sass-loader'
536548
),
537549
},
550+
// Opt-in support for LESS (using the .less extension).
551+
// Needed to support dynamic imports of antd component stylesheets.
552+
{
553+
test: lessRegex,
554+
exclude: lessModuleRegex,
555+
use: getStyleLoaders(
556+
{
557+
importLoaders: 3,
558+
sourceMap: isEnvProduction && shouldUseSourceMap,
559+
},
560+
'less-loader'
561+
),
562+
// Don't consider CSS imports dead code even if the
563+
// containing package claims to have no side effects.
564+
// Remove this when webpack adds a warning or an error for this.
565+
// See https://github.com/webpack/webpack/issues/6571
566+
sideEffects: true,
567+
},
568+
// Adds support for CSS Modules, but using LESS
569+
// using the extension .module.less
570+
{
571+
test: lessModuleRegex,
572+
use: getStyleLoaders(
573+
{
574+
importLoaders: 3,
575+
sourceMap: isEnvProduction && shouldUseSourceMap,
576+
modules: {
577+
getLocalIdent: getCSSModuleLocalIdent,
578+
},
579+
},
580+
'less-loader'
581+
),
582+
},
538583
// "file" loader makes sure those assets get served by WebpackDevServer.
539584
// When you `import` an asset, you get its (virtual) filename.
540585
// In production, they would get copied to the `build` folder.
@@ -559,6 +604,7 @@ module.exports = function(webpackEnv) {
559604
},
560605
plugins: [
561606
// Generates an `index.html` file with the <script> injected.
607+
new AntdDayjsWebpackPlugin(),
562608
new HtmlWebpackPlugin(
563609
Object.assign(
564610
{},

0 commit comments

Comments
 (0)