jaredpalmer / react-parcel-example

Minimum viable React app with Parcel Bundler

React Parcel Example

A minimum viable React app with Parcel Bundler

What's inside?

• parcel-bundler
• react
• react-dom
• babel-preset-react-app
• autoprefixer

Also checkout out the TypeScript branch

Getting started

Clone and install deps

git clone [email protected]:jaredpalmer/react-parcel-example.git
cd react-parcel-example
yarn
yarn start

Then open http://localhost:1234 and edit index.js and press save. Parcel will automagically hot reload you files whenever you make changes.

Building for Production

npm run build

This will compile your JS and copy your index.html to the dist folder which you can deploy wherever as a good ol' webpage.

CSS

Parcel uses PostCSS plugins to manage CSS assets. I've included autoprefixer for vendor prefixing with the same setup as create-react-app. You can find and modify the PostCSS setup in package.json. If you'd rather keep your PostCSS setup in a dotfile, you can delete the postcss key from package.json, and place its contents in a .postcssrc file too.

Folder structure and relative paths

Keeping everything in the root directory obviously won't scale past a point. Parcel is very flexible about folder structure, but there are a few gotchas.

Moving JS entry

When you do move index.js just make sure to update the <script> tag in index.html so that it points to the correct relative path.

For example, if you want to move index.js to src/index.js, you would need make the following change to index.html:

<   <script src="./index.js"></script>
---
>   <script src="./src/index.js"></script>

Moving index.html

If you want to move index.html, you will need to update your npm scripts in package.json with the new relative path.

Deployment

Refer to the deployment guide in create-react-app, just note that you will need to account for the fact that Parcel builds out to a dist directory, while CRA builds to a build directory. You can make it identical by adding --out-dir build to both start and build npm tasks in package.json.

react-parcel-example's Issues

share a example from real project

https://github.com/ThaddeusJiang/parcel-react-starter

[Request]: Can someone make this repo into a CLI command similar to create-react-app?

We (the Parcel team) have been really excited about all the amazing feedback and contributions we're getting from the community.

We've been discussing forking create-react-app or making a similar tool that works entirely on Parcel.

@parcel#110

@jaredpalmer Do you wanna take on that project? It looks like you already have 99% done 😂

Uncaught ReferenceError: require is not defined

When I run the yarn start, the console prompts Uncaught ReferenceError: require is not defined, and the contents of the App component are not displayed

SVG does not work

There is missing React logo, SVG just does not load properly.

Adding tests

Have you considered adding support for tests? This would make it much more useful as a potential React starter kit, while still keeping it relatively minimal. I already did it in a fork for my own use, and I'd be willing to make a PR, but I wonder if you're willing to move this project in that direction, or you want to keep it as an example of how minimal things are with parcel?

Uncaught ReferenceError: require is not defined

I just cloned the project and do as the get started part, but got an error shown as the following pictures. Can anyone help?

SVG Logo doesn't display

For some reason, the SVG doesn't seem to be displaying properly:

---

Steps to reproduce:

1. Clone this repo and cd into its root project directory
2. Run npm install or yarn to install dependencies
3. Run npm start and head over to localhost:1234

Use cross-env to set NODE_ENV

On windows yarn start and yarn build won't work, because we set env vars with SET. Using node-env will fix this issue.

I recommend using cross-env as a dev dependency. Will add a PR shortly.

Why is autoprefixer necessary for "Minimum viable React app with Parcel Bundler"?

As the title states, why is this module in this project? It seems like a nice-to-have, but by no means required for a React application. Could some justification be added for it's inclusion? CSS is not a concern for React applications as there are many solutions, just as there are many solutions for fetching data and organizing props. I do not see these added in this repository.

I've included autoprefixer for vendor prefixing with the same setup as create-react-app

create-react-app ships with a ton of stuff that isn't necessary, so I'm wondering if the project aim should change or if this module should be removed.

Wasn't clear on how to run production files

The example will load on localhost but doesn't open when trying from 'dist/index.html'. Loading it from here wont work after npm run build or npm start. Whats causing parcels bundled files not to work?

Edit: Turns out you need to run the dist on a server for it to work correctly, I guess that is assumed knowledge but it maybe will be useful to put in the build section of the docs for other beginners with parcel?

react-parcel-example/index.js: Cannot find module '@babel/plugin-transform-react-jsx'

This error occurred after cloning, installing all dependencies and starting project.