Our great sponsors
-
webpack-dev-server
Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
now we have a dist directory. inside of dist we have main.js file, to execute the file in browser we need to add it as a script in a html file. Instead of doing it manually, we'll take the help of html-webpack-plugin.
current setup doesn't provide us a developer friendly environment, we need to check the index.html file every time we make a change, to resolve this we'll use webpack-dev-server.
all the code of this article is available here.
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
Create-react-app is a great tool, it gets the project running in minutes. But it binds our hands with a lot of abstractions, according to the official react docs it is meant to be a tool to get anyone started with a good dev environment. It comes out of the box with a lot of good defaults(many of which we may never need) but it's very difficult to extend or bend according to our needs. So in this series of articles we'll learn how to build our react setup from scratch.