Before we get started, you'll need to install Node and Yarn or npm, and create a directory for your project. Then, install Parcel into your app using Yarn:
yarn add --dev parcel
Or when using npm run:
npm install --save-dev parcel
Now that Parcel is installed, let’s create some source files for our app. Parcel accepts any type of file as an entry point, but an HTML file is a good place to start. Parcel will follow all of your dependencies from there to build your app.
Parcel has a development server built in, which will automatically rebuild your app as you make changes. To start it, run the
parcel CLI pointing to your entry file:
yarn parcel src/index.html
Now open http://localhost:1234/ in your browser to see the HTML file you created above.
styles.css file and reference it from your
index.html file with a
<link> tag, and an
app.js file referenced with a
As you make changes, you should see your app automatically update in the browser without even refreshing the page!
So far, we’ve been running the
parcel CLI directly, but it can be useful to create some scripts in your
package.json file to make this easier. We'll also setup a script to build your app for production using the
parcel build command. Finally, you can also declare your entries in a single place using the
source field so you don't need to duplicate them in each
Now you can run
yarn build to build your project for production and
yarn start to start the development server.
Declaring browser targets#
By default Parcel does not perform any code transpilation. This means that if you write your code using modern language features, that’s what Parcel will output. You can declare your app’s supported browsers using the
browserslist field. When this field is declared, Parcel will transpile your code accordingly to ensure compatibility with your supported browsers.
You can learn more about targets, as well as Parcel’s automatic support for differential bundling on the Targets page.
Now that you’ve set up your project, you're ready to learn about some more advanced features of Parcel. Check out the documentation about development and production, and see the Recipes and Languages sections for more in-depth guides using popular web frameworks and tools.