├── .gitattributes
├── .gitignore
├── .postcssrc
├── README.md
├── app
    ├── js
    │   └── script.js
    └── scss
    │   └── style.scss
├── index.html
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .cache/
3 | dist/
4 | yarn.lock
5 | package-lock.json
6 | 


--------------------------------------------------------------------------------
/.postcssrc:
--------------------------------------------------------------------------------
1 | {  
2 |   "plugins": {
3 |     "autoprefixer": true
4 |   }
5 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # boilerplate-parcel
 2 | 
 3 | ![Bundle your files more quickly with Parcel JS](https://i.imgur.com/D7ggQBB.png)
 4 | 
 5 | Parcel.js is billed as a "zero configuration" bundler. It can transform and compile your HTML, SCSS, JS and many other file types, with a minimum of time spent setting up a config file.
 6 | 
 7 | If you're just working on a simple front-end web app and don't require a lot of control over your build, you can swap in Parcel for WebPack or Gulp.
 8 | 
 9 | ## How to install Parcel
10 | 
11 | You can install Parcel either using npm or yarn. You'll also need to create a package.json file. 
12 | 
13 | *Note: if you don't have [Node.js](https://nodejs.org/en/) installed, you will need to do that before following these steps!*
14 | 
15 | **npm:**
16 | ```
17 | npm install -g parcel-bundler
18 | npm init -y
19 | ```
20 | 
21 | **yarn:**
22 | ```
23 | yarn global add parcel-bundler
24 | yarn init -y
25 | ```
26 | 
27 | ## Set up your files
28 | 
29 | We'll create a very simple website with just these files:
30 | 
31 | * index.html
32 | * script.js
33 | * style.scss
34 | 
35 | The script.js file will be where you include your Sass file:
36 | 
37 | ```
38 | import '/style.scss';
39 | ```
40 | 
41 | ## Run Parcel!
42 | 
43 | To run Parcel, on your command line, use this command:
44 | 
45 | ```
46 | parcel index.html
47 | ```
48 | 
49 | This will build your project, and start a local dev server at http://localhost:1234/. The cool part about this is that anytime you make changes to your files, Parcel will automatically rebuild and update the local site for you.
50 | 
51 | ## Add autoprefixer
52 | 
53 | I wanted to add autoprefixer to add vendor prefixes to CSS properties that need it. Unfortunately Parcel doesn't do that by default, but it was fairly simple to add autoprefixer to my project.
54 | 
55 | First I installed PostCSS, which runs autoprefixer:
56 | 
57 | ```
58 | yarn add postcss-modules autoprefixer
59 | ```
60 | 
61 | Then I created a config file in my project root with the following code:
62 | 
63 | ```
64 | {  
65 |   "plugins": {
66 |     "autoprefixer": true
67 |   }
68 | }
69 | ```
70 | 
71 | Note: this code is different from what Parcel has in their PostCSS setup instructions. 
72 | 
73 | However, when using their code snippet, when I built the project, the CSS class name that was using prefixed properties got renamed. This made all the CSS styles for that class name not work. So if you're using autoprefixer I'd recommend using the code snippet I have above here.
74 | 
75 | ## More resources
76 | 
77 | I created this GitHub project to accompany a blog post on getting up and running with Parcel. <a href="https://coder-coder.com/bundle-files-quickly-parcel" target="_blank">Check it out here.</a>


--------------------------------------------------------------------------------
/app/js/script.js:
--------------------------------------------------------------------------------
1 | import '/app/scss/style.scss';
2 | 
3 | console.log("hello world");
4 | 
5 | const testNumber = 12345;
6 | console.log(testNumber);


--------------------------------------------------------------------------------
/app/scss/style.scss:
--------------------------------------------------------------------------------
 1 | $white: #ffffff;
 2 | 
 3 | html {
 4 |     box-sizing: border-box;
 5 |     font-size: 100%;
 6 | }
 7 | 
 8 | body {
 9 |     margin: 0;
10 |     padding: 20px;
11 |     line-height: 1.2;
12 |     font-family: Arial, Helvetica, sans-serif;
13 |     color: $white;
14 |     background-color: #333333;
15 | 
16 |     h1 {
17 |         font-size: 3rem;
18 |         color: $white;
19 |         transition: all 300ms ease;            
20 |     }
21 | }
22 | 
23 | .test {
24 |     display: flex;
25 |     justify-content: center;
26 |     align-content: center;
27 |     align-items: center;
28 |     height: 100%;
29 |     transform: rotate(180deg);
30 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>    
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 5 |         <title>Boilerplate using Parcel</title>            
 6 |     </head>
 7 |     <body>
 8 |         <script src="./app/js/script.js"></script>
 9 |         
10 |         <h1>Boilerplate using Parcel</h1>
11 |         <div class="test">
12 |             <p>
13 |                 This website project uses Parcel to compile the SCSS and JS files.
14 |             </p>
15 |             <p>
16 |                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et placerat dolor, et consequat nisi. Nam aliquet felis vitae consequat ultrices. Suspendisse ut lacus id justo fringilla sollicitudin ac non sapien. Suspendisse sed tristique lorem. Praesent vitae feugiat orci. Donec in tempor augue. Donec enim arcu, egestas at efficitur nec, tristique eget massa.
17 |             </p><p>
18 |                 Vivamus laoreet eu nibh sit amet tristique. Nam at cursus tellus. Nunc mollis, purus ac varius pellentesque, orci ex gravida massa, eget sagittis justo tortor id ante. Aliquam vel felis orci. Quisque ac velit eros. Nullam non ultrices sapien. Fusce fermentum convallis dui vitae ullamcorper. Etiam quam purus, mattis in eleifend nec, vestibulum nec turpis. Donec et tellus a metus efficitur aliquam.
19 |             </p><p>
20 |                 Quisque aliquam aliquet sodales. Maecenas eu est eget justo eleifend feugiat. Vivamus ullamcorper leo vel nunc venenatis ultrices. Pellentesque congue, ex eu lacinia rhoncus, nisl dolor faucibus sem, vitae scelerisque nulla turpis vitae urna. Donec at faucibus tellus. Nunc fringilla eros sagittis felis dictum, sed placerat eros tempor. Pellentesque imperdiet lorem eget pretium pharetra. Integer ac nisl eget tortor tempus elementum. Vestibulum congue ex sed congue tempus. Aenean mollis, quam ut vestibulum sagittis, massa urna elementum velit, interdum vestibulum ante nisl eu tellus. 
21 |             </p>
22 |         </div>
23 |     </body>
24 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "boilerplate-parcel",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "author": "Jessica",
 6 |   "license": "MIT",
 7 |   "dependencies": {
 8 |     "autoprefixer": "^9.4.6",
 9 |     "postcss-modules": "^1.4.1"
10 |   },
11 |   "devDependencies": {
12 |     "cssnano": "^4.1.8",
13 |     "sass": "^1.16.1"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------