coinpayu

How to run SPFx webpart using npm start

June 12, 2021

    In this article we are going to learn how to execute SPFx Webpart locally without gulp for Flexible UI development.  We can use webpack and run it like a traditional react way using "npm start" command. So you can access both "gulp serve" and "npm start" during development.

Before we going to start we need SPFx Environment Setup and Create New Webpart.

You can get the git repo HERE.

 1.  Install npm Packages

  Install the below required npm packages in your SPFx solution.

 
    npm install --save-dev webpack webpack-dev-server webpack-cli
 

This will install:

webpack module — which include all core webpack functionality
webpack-dev-server — this development server automatically rerun webpack when our file is changed
webpack-cli — enable running webpack from the command line
 
Note: Please make sure you have installed latest version of webpack. Else this is showing TypeError: Cannot read property 'tap' of undefined.

2. Add Script in Package.json

Add the following script to package.json

   
    "scripts": {
        "start": "webpack serve --open --hot --mode development",
    },
 

 

3. Create Index HTML

Now create an index.html file in your root project with the following content:

     
    <!DOCTYPE html>
    <html>
        <head>
            <title>My React Configuration Setup</title>
        </head>
        <body>
            <div id="app"></div>
        </body>
    </html>
 

 

4. Update Index.tsx

 Update this react code at "Src/index.tsx"

   
    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import HelloWorld from './webparts/helloWorld/components/HelloWorld';
    import { IHelloWorldWebPartProps } from './webparts/helloWorld/HelloWorldWebPart';

    interface State { }

    class Main extends React.Component<IHelloWorldWebPartProps, State> {
      render() {
        return (
          <HelloWorld description={this.props.description} />
        );
      }
    }

    ReactDom.render(<Main description={'Welcome to all'} />, document.getElementById('app'));


 
Note: If you facing any error in index.ts just change the extention "ts" to "tsx" and check it.

5. Add Webpack Config

Add below webpack.config.js in your SPFx project's root folder

// webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
    entry: ['./src/index.tsx'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true,
    },
    devtool: 'source-map',
    resolve: {
        extensions: [
            '.ts',
            '.tsx',
            '.js',
            '.jsx',
            '.scss',
            '.css',
            '.svg',
            '.eof',
            '.woff',
            '.woff2',
            '.ttf',
            '.txt',
            '.xml'
        ]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            { test: /\.(js)$/, use: 'babel-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader?sourceMap",
                ],
                include: /\.module\.s[ac]ss$/
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader?sourceMap",
                ],
                exclude: /\.module\.s[ac]ss$/
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
                use: [{ loader: 'url-loader' }]
            }
        ]
    },
    target: 'web',
};


6. Configuring Babel and Loaders

The React component we wrote above used the class syntax, which is a feature of ES6. Webpack needs Babel to process ES6 into ES5 syntaxes in order for this class to work. And need to configure appropriate loaders in webpack config. we already added all loader in setp 5. just install the below npm packages only.

     
    npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
    ts-loader style-loader css-loader sass-loader html-webpack-plugin
 

Why we need these packages?

@babel/core is the main dependency that include babel transform script
@babel/preset-env is the default Babel preset used to transform ES6+ into valid ES5 code. Optionally configure browser polyfills automatically
@babel/preset-react is used for transforming JSX and React class syntax into valid JavaScript code
babel-loader is a webpack loader that hook Babel into webpack. We will run Babel from webpack with this package

ts-loader is the TypeScript loader for webpack

html-webpack-plugin that simplifies creation of HTML files to serve your bundles

In order to use Babel presets, create a new .babelrc file 

// .babelrc

    {
        "presets": ["@babel/react", "@babel/env"],
        "compact" : true
    }
 


All the setup is ready, now you can run following command to execute it.

     
     npm start
 


Note: In SPFx using "module.scss". So please make sure you have installed updated version of npm loaders. otherwise style not loaded or shows error.
 

Hope This is working fine, Thanks for reading.