react-scroll-grid v1.0.0

Getting Started with React-Webpack template

This template can be used as a starter for a client side app, bundled with react regardless if React is being used or not. It has support for styled-components and for storybook out of the box.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the terminal. (There is work in progress from webpack to support displaying errors in browsers in version 5 as they do in previous version. )

npm run build

Builds the app for production to the build folder. We'll describe later how you can set a different build location. It correctly bundles React in production mode and optimizes the build for the best performance.

Setup

You need to clone the repository and to remove the .git folder. After that, copy all the files in your repository, and you can start coding.

Configuration

Webpack is configured both for development and production. in order to change the configuration, you can edit webpack.config.js from businessConfig.

Custom configuration are supported from businessConfig files.

• Aliases

  In businessConfig folder you can find a webpack.config.alias.js file. Add your aliases there. They will automatically be added in webpack configuration at build time. If you are using Webstorm, in order to avoid warnings about not find aliases, Open the Settings/Preferences dialog ⌘, and go to Languages and Frameworks | JavaScript | Webpack, select Manual configuration, and set webpack.config.alias.js from businessConfig as configuration file.

• Custom configuration

  For custom configuration you need to create a file named {platform}_{mode}.json file (i.e. web_development.json) inside businessConfig folder. Values from platform and mode are taken from script args set in package.json. Here you can add any rule supported by webpack as well as some custom rules. The resulting configuration will be merged with default webpack configuration file. The configuration file supports two properties:

  • wepbackConfiguration:

        this must respect webpack structure. It will be merged in the final configuration file. The end result is similar with editing the `webpack.config.js` file from `config` folder.

  • customConfiguration:

    • DefinePlugin values: You don't need to declare the DefinePlugin in webpack configuration file anymore. Add in `{platform}_{mode}.json` a key called `definedConstants` and add all the values needed as an array of objects (Please see `business_configuration_template.json` file from `businessConfig`) 

    • NormalModuleReplacementPlugin: Add a key in `{platform}_{mode}.json` called replacements. The value for that is an array of objects that contains two keys: source and target. Both source and target are relative to `src` path which is defined in `config/paths.js` and represent the root folder of the app business logic.

    • Externals: In order to add externals property (you can add it also from `webpack.config.js` file), you can add it in `{platform}_{mode}.json`. Modules added as externals, will be deleted from node_modules before building in order to avoid compatibility issues if current module is used as a library in other app. If you add externals, please add same packages on `package.json` in peerDependencies. The entry is already created so you will only need to add your dependencies there.

    • Source maps: In  `{platform}_{mode}.json` add a key called `shouldUseSourceMap`. If set on true, source maps will be generated. By default development mode uses source maps while production mode does not. This setting can also be edited in `webpack.config.js` using `devtool` key.

    • Inject the bundle in HTML: Default option is true. If the `{platform}_{mode}.json` contains in output the key `libraryTarget`, the HTML won't be created and the bundle will be built as a standalone js.

    • Split code: This option is default on true. If set on false, one single file will be built. If the filename for bundled code is specified, this option will be set automatically on false at build time

    • Output path: The option is "outputPath" and can contain the filename as well ("build/index.js"). If the filename is included, it will be used in final webpack configuration

    • File name: The option is "fileName". If set, it will replace the file name set trough "outputPath" if any. If not set, the default value will be used.

    • Entry point: The option is "entryPoint" and must contain a path relative to src path. (i.e. if you have src/components/App.jsx as entry point, the value must be set to "components/App.jsx"). If not set, `src/index.jsx` will be used as default

Build

Both build scripts (start.js and production.js) support pre-build and post-build hooks. In order to run custom code at build time, create a file called {platform}_{mode}_pre_build_hooks.js or {platform}_{mode}_post_build_hooks.js and add your code there. Both pre-build and post-build hooks modules must export an object with a run function that will be executed at build time (Please see {platform}_{mode}_pre_build_hooks.js and {platform}_{mode}_post_build_hooks.js files from businessConfig)

##Enjoy