Build React Embeddable widgets using webpack

Hello React Lovers, Are you tired, looking for how to build React Embeddable widget using webpack? best articles. Here is the best article. In the end of this article you will see why I said this is the best article. So lets start the article “Build React Embeddable widgets using webpack” and Redux.

Build React Embeddable widgets using webpack
  1. Setup React app with webpack and babel
  2. Install some dependencies you may need
  3. Creating files and folders
  4. Run and Build
  5. Parcel build is failing “bundle.scss:undefined:undefined: plugin is not a function” ERROR

Here is my “React Embeddable widgets” repository in GitHub. Click here to get the repo. Make sure to follow my GitHub.

https://github.com/ozandabb/react-embeddable-widget

1. Setup React app with webpack and babel

In here I am creating a small React app to show you how to create Embeddable widgets using webpack. Without using npx create-react-app APP_NAME command, I am going to setup my react app with webpack and babel. first setup the folder with npm.

mkdir react-widget-app cd react-widget-app npm init

You will see some basic questions when you give “npm init” command. If you want to change that settings, change it!. or Stay with default settings. Finally you will see a package.json file in the root directory. After that create two folders in the root directory. Name them as “src” and “public“. Inside the src folder, I am going to create another two folders as “Components” and “Widgets”. Then inside the public folder, create a new html file called “index.html”

2. Install some dependencies you may need

first we need to install react and react-dom

npm install react react-dom

To setup the webpack, we need to install the webpack to your project.

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

After that we need to install babel.

npm install @babel/core npm install @babel/preset-env npm install @babel/preset-react npm install babel-loader

After that installing those dependencies, go to package.json file and change the “script” like this.

“scripts”: {
     “start”: “webpack –mode=development”,
     “build”: “webpack –mode=production”,
     “dev”: “webpack-dev-server”
},

3. Creating files and folders

After installing dependencies, let’s get into create files. In my project, I created two folders inside the src folder and named those folders as “components” and “widgets”.

We are using components to design and implement what we need to do and we are using widgets to build our widget files.

Then we are going to create components inside the components folder. In my project, I named those files as nameComponent.js and searchComponent.js. Here are the codes that I implemented in mine.

After that, let’s create widgets. Inside the widget folder, I created two files to above two components. I named those files as “nameWidget.js” and searchWidget.js“. Here are the codes,

In my searchComponent file, there is a text input field and a button. User can enter a value and can press the button. After that the user can see the entered value in the nameComponent. In my project, that is the scenario. I am passing data using react pros and catch those value using react state. This is a simple “React Embeddable widgets project using webpack”. In here, I am using redux to store the input value.

4. Run and Build your React Embeddable widgets

Now let’s run our project. First of all, make sure to edit your package.json file’s “script” part like this. I mentioned this part in the above.

“scripts”: {
     “start”: “webpack –mode=development”,
     “build”: “webpack –mode=production”,
     “dev”: “webpack-dev-server”
},

If you want to run your project, you can use,

npm run start

If you want to build your project’s widgets. you can do like this.

npm run build

5. Parcel build is failing “bundle.scss:undefined:undefined: plugin is not a function” ERROR webpack

This is seems to be a bug in Parcel’s nanocss. I could only fix it by not minifying the css at all, using

parcel build –no-minify

this is issue is come when your version is old, with the new npm i parcel vertion, this issue seems to be resolve.

Here is the greatest solutions for the error – click here

Make sure to leave a comment.

Thank you for reading. If you are interesting on my article, make sure to follow my other articles as well.

Make sure to follow my socials.

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x