Wednesday, June 13, 2018

dipping a toe into modern web dev: deployment with parcel and a hello world in react

I admit, there's part of me that wants the world forever to be

<script src="mystuff.js"></script>

(and of course, the need for it to have a separate closing tag seems odd anyway ;-)

The save, reload loop is such a nice, tight way of coding, and so easy to understand! But it's limiting - new web technologies have a build step, and that's just the way life will be for all but the most trivial vanilla.s project.

My coworker Eric Wyler found the next best thing - webpack is famously fiddly (for a laugh, just see what @IAmDevloper says about it) but he got some great results with Parcel.

Here's his Parcel bootstrap steps:

(This assumes you've installed npm already)

Pick a project name, we'll go with "fooproj" for now.

mkdir fooproj
cd fooproj
npm init -y
npm install -g parcel 
(this install parcel globally, so you just have to run it once for your first project)

Now use an editor or the command line to do the basic
cat > index.html

<html lang="en">
  <title>Parcel React Example</title>
  <div id="root"></div>
  <script src="./index.js"></script>


cat > index.js

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
    <h1>Hello world</h1>
ReactDOM.render(<App />, document.getElementById('root'));
// Hot Module Replacement
if ( {;

so after that:

npm install --save react react-dom
parcel index.html

BOOM! Like the console says, you now have a little webserver running at http://localhost:1234  - and if you make a change to index.js, and save, it automagically reloads (actually, technically it's not even reloading... in theory if you're doing something with state it might get a little munged, but for many changes it's super-instant.)

Now it looks like dist/ is already full of something ready to deploy, but for some reason it was assuming an absolute path, but a command like
parcel build index.html --public-url .
did what I wanted, and I could just plop the contents of dist/ into an arbitrary folder on my webserver.

No comments:

Post a Comment