Setting Up React App Without Create-React-App (CRA)
Prathmesh Dhatrak's Blogs
Hello friends! Today I am going to share how to set up React project without using Create-React-App (CRA). Many developers directly jump to CRA for new projects, but sometimes we need more control on our build process, right?
I was working on a project last week where I needed custom webpack configuration. CRA was making things complicated with "eject" and all that headache. So I thought why not set up everything from scratch and have full control?
Let me share my approach which is working perfectly for our team now.
Why Not Use CRA?
CRA is good for beginners, no doubt. But when you work in production:
- It installs too many unnecessary packages
- Customization requires ejecting which is irreversible
- Build size becomes larger than needed
- You don't learn what's happening behind the scenes
Steps to Set Up React Without CRA
1. Initialize Your Project
First thing first, initialize your npm project:
npm init
Fill the details or simply use npm init -y if you are in hurry like me always!
2. Install Required Packages
Now we need to install required dependencies:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
What are these packages for?
- @babel/core: Main babel package to transpile ES6+ to browser compatible JavaScript
- @babel/preset-env: Preset for converting modern JavaScript
- @babel/preset-react: For JSX support (most important for React!)
- babel-loader: Connects babel with webpack
- webpack: Module bundler (the heart of our setup)
- webpack-cli: Command line interface for webpack
- webpack-dev-server: Development server with hot reload
- html-webpack-plugin: Creates HTML files to serve webpack bundles
- css-loader: Interprets @import and url() like import/require()
- style-loader: Injects CSS into DOM
Also, don't forget to install React itself:
npm install react react-dom
3. Create Basic Files
We need minimum 3 files to start with:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js
import React from 'react';
function App() {
return (
<div>
<h1>Hello from React without CRA!</h1>
<p>This setup is much faster and lighter.</p>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
4. Configure Webpack
Create webpack.config.js in root:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./index.js", // Note: fixed the entry point path
output: {
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // Added jsx support
exclude: /node_modules/, // Important to exclude node_modules!
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
extensions: ['.js', '.jsx'], // Added to resolve imports without extensions
},
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
}),
],
};
5. Create Babel Configuration
Create .babelrc file in project root:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
6. Update package.json Scripts
Add these scripts to your package.json:
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production"
}
Running Your App
Now simply run:
npm start
Webpack dev server will start and open your app in browser. For production build:
npm run build
This will create optimized files in dist folder ready for deployment.
Troubleshooting Common Issues
If you face "Module not found" error, check your file paths. I wasted 2 hours last time because I wrote ./src/index.js but my file was in root folder!
Sometimes babel config doesn't pick up. Try creating babel.config.js instead of .babelrc.
Conclusion
Setting up React without CRA gives you full control and better understanding of your project structure. It's not that complicated once you get familiar with webpack basics.
Hope this helps someone! If you have any questions, drop a comment.
Happy coding!
