A react component library build for skyfire.
npm install @gofynd/theme-template.jsx files from the src directory.
dist directory, maintaining the relative path structure.
CleanWebpackPlugin and MiniCssExtractPlugin for efficient build processes.
bash
npm install github:gofynd/fdk-react-templates.git#V.X.X.X
``
Replace V.X.X.X.X with proper version.
Example :
``bash
npm install github:gofynd/fdk-react-templates.git#V.1.0.0
``
2. Use in your Component
`jsx
import ProductListing from "fdk-react-templates/pages/product-listing/product-listing";
``
$3
1. Clone the repository:
`bash
git clone https://github.com/gofynd/fdk-react-templates.git
cd fdk-react-templates
`
2. Install dependencies:
`bash
npm install
`
Usage
$3
To build the project for production, run:
`bash
npm run build
`
This will generate the output in the dist directory.
$3
For development, use:
To test locally package in your local system before publishing npm package in your local theme repo, run: \r
`bash
npm i "src url of fdk-react-templates"
`
This will install the development package in your projects node_modules.
Project Structure
- src/: Source files including JavaScript/TypeScript, CSS, Less, and assets.
- dist/: Output directory for the production build.
- webpack.config.js: Webpack configuration file.
Webpack Configuration
$3
The entry points are dynamically generated by including all .jsx files from the src directory:
`javascript
entry: () => {
const entryFiles = glob.sync('./src/*/.jsx');
const entry = {};
entryFiles.forEach(file => {
entry[file.replace('src', '')] = file;
});
return entry;
},
`
$3
The output is configured to generate files in the dist directory, maintaining the relative path structure:
`javascript
output: {
path: path.resolve(__dirname, "dist"),
filename: (chunkInfo) => {
const getNameFromPath = (path) => path.replace(/\.jsx$/, "");
chunkInfo.chunk.name = getNameFromPath(chunkInfo.chunk.name);
return '[name].js';
},
libraryTarget: "umd",
library: "firestone",
umdNamedDefine: true,
globalObject: 'typeof self !=="undefined" ? self : this',
clean: true,
publicPath: './',
},
`
$3
The configuration includes several plugins to enhance the build process:
- CleanWebpackPlugin: Cleans the dist directory before each build.
- MiniCssExtractPlugin: Extracts CSS into separate files, supporting both modules and global CSS.
$3
Various loaders are configured to handle different types of files:
- babel-loader: Transpiles JavaScript and TypeScript files using Babel presets.
- css-loader, style-loader, postcss-loader: Handles CSS files with support for CSS modules.
- less-loader: Compiles Less files, with support for both modules and global styles.
- @svgr/webpack: Processes SVG files to be used as React components.
- asset/resource: Manages font files and other static assets.
$3
Certain libraries are treated as external dependencies to reduce the bundle size So make sure to add them in your package.json:
`javascript
externals: {
'react': 'react',
'react-router-dom': 'react-router-dom',
'fdk-core/components': 'fdk-core/components',
'fdk-core/utils': 'fdk-core/utils',
'awesome-snackbar': 'awesome-snackbar',
'react-outside-click-handler': 'react-outside-click-handler',
'react-hook-form': 'react-hook-form',
'react-range-slider-input': 'react-range-slider-input',
'imask': 'imask',
'card-validator': 'card-validator',
'@react-google-maps/api': '@react-google-maps/api',
'react-google-autocomplete': 'react-google-autocomplete',
'framer-motion': 'framer-motion',
'html-react-parser': 'html-react-parser',
'google-libphonenumber': 'google-libphonenumber',
'react-international-phone': 'react-international-phone',
'@emotion/is-prop-valid': '@emotion/is-prop-valid'
}
`
$3
The project uses Terser for minification and optimizes chunk splitting:
`javascript
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
keep_fnames: true,
keep_classnames: true,
},
}),
],
splitChunks: {
chunks() {
return false;
},
},
}
``