I often create React apps for work and even for myself personally, but one thing that has always bothered me is how much configuration there is. Even using create-react-app, there are so many scripts involved that sometimes it plain doesn't work right out of the box. I don't want to waste time configuring my project, I just want to write some code!
Parcel is a webpack alternative which aims to remove the need for any configuration files at all. It does still support adding config files, but the defaults are so good you don't really need to add any.
The result that I post here is an experiment to see just how simple our "starter project" can be.
Create the project files
First, create a new folder for your project and add these files to it:
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"build": "parcel build src/index.html --public-url ./",
"start": "parcel src/index.html"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>My App</title>
</head>
<body>
<div id='root'></div>
<script type="module" src="start.js"></script>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom/client'
// Main app component
class App extends React.PureComponent {
render() {
return <div>Hello world</div>
}
}
// Render the app
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
A couple things that I've changed:
- Added
--public-url ./to the build command. This allows you to upload your production code to any subfolder of any server. Without this, your code must be hosted at the root of the server. - Added a
meta viewporttag to disable "zoomed desktop mode" on some mobile devices. This does not prevent zooming afterwards though. - Used a
PureComponentfor the main app component. Pure components are much more efficient.
Install dependencies
Next, run these commands to install dependencies:
npm install react react-dom npm install --save-dev parcel
Done!
And that's it. You can now run npm start to run a local server, or npm run build to output a production build to the dist folder.