Permalink
Fetching contributors…
Cannot retrieve contributors at this time
201 lines (135 sloc) 7.65 KB
layout title description date categories seriesTitle
post
How to export your React project from CodeSandbox to your desktop with Parcel.js
Learn how to quickly take your React project from CodeSandbox to your local with Parcel.js for building your assets
2019-01-24
React
Parcel.js
practical-react-series
Practical React Developer

CodeSandbox is great for getting up and running quickly with no setup. However, CodeSandbox is not usually how I choose to bootstrap my projects and typically the companies I work for do not use an approach like this either (maybe they should, but that is a different post!).

You will find that a high percentage of companies today are using Webpack as their preferred front-end build tool. If you would like to learn more about Webpack, I have a comprehensive mini-series, starting with Webpack 4 from absolute scratch.

I chose to use Parcel.js for my project for several reasons;

  • It is crazy fast to get working for development purposes
  • Is production ready
  • Requires little to no configuration
  • Just works

If you have not used Parcel.js before, this is a fantastic time to learn, so stick with me!

Note for clarification as this is also a standalone post. This post is part of a mini-series where we are building a real estate property listing website, complete with routing and advanced forms.

Build a React app with Parcel.js from scratch

Remember, we are building a premium property listings website called Premium Property Finder, so let's get started.

Create a new folder called premium-property-finder, cd to it and run the following commands in your terminal;

npm init -y && git init
npm install --save react react-dom
npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react parcel-bundler

The commands initialise our project, source control, install React and some basic plugins we need for Babel, and of course, Parcel itself.

Add a .gitignore file and add the following (to keep our repository nice and clean);

node_modules
.cache
dist

Then create a new directory called src and add a file called index.html as follows;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Premium Property Finder</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <div id="root"></div>
  </body>
</html>

Finally, add the following NPM script to your package.json file;

"scripts": {
  "start": "parcel ./src/index.html"
}

Run npm start in your terminal and you are up and running.

Parcel.js, React "Hello, World!"

Go to http://localhost:1234 in your browser and you should see "Hello, World" as shown in the above screenshot. This is not React code, this is just static HTML. We will add the React code next.

Add React to your Parcel.js web app

You might be surprised to know that we do not need to do anything particularly special to get React working in our web app.

Open index.html and add a script tag to index.js (we will create this next) as follows;

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

Now create a new file called index.js and add the following;

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<App />, document.getElementById('root'))

<App /> is not defined yet, so let's do that. Flip back to your earlier CodeSandbox (you can find mine here; Getting Started With React) and copy the App function that we created.

Copy it and paste just before our call to ReactDOM.render, as follows;

import React from 'react'
import ReactDOM from 'react-dom'

function App() {
  const features = [
    'Help to Buy available, ideal for first time buyers',
    'Within walking distance of the Northern Quarter, Ancoats & NOMA',
    'Exposed brickwork retaining the charm of the existing building',
    'Cycle storage',
    'Victorian Mill conversion',
    '13 unique 1,2 and 3 bed apartments available'
  ]
  return (
    <div className="App">
      <h1>Premium Property Finder</h1>
      {/*<KeyFeatures features={features} />
      <Map />*/}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Notice that we have to comment out <KeyFeatures /> and <Map /> at this time, as we have not migrated those files over yet (we will do that next).

Save changes, and refresh the browser, you should now see two titles, Hello, World! and Premium Property Finder. This confirms that React is working properly. Feel free to go delete the Hello, World! header text from index.html.

How to migrate your code from CodeSandbox

There are a few ways to approach migrating your code from CodeSandbox.

Good old-fashioned copy and paste

When you are working with a small number of files, the quickest way is to simply copy your changes and manually re-create the files in your local editor. Once you have 5-6-7+ files, this will become tiresome.

Download files directly from CodeSandbox

CodeSandbox has a super handy download button on the menu bar in the top left-hand corner.

Download files from CodeSandbox

Click this button to download all the files and folders from CodeSandbox to a ZIP file. Extract the ZIP file and copy the files into your project.

Save your project directly to GitHub

Click the GitHub icon on the left hand menu bar, and sign in with your GitHub account.

Save CodeSandbox to GitHub

Give the project a name and click Create Repository. You could now download the repo from GitHub in the normal way.

Please go ahead and migrate your <KeyFeatures /> and <Map /> components, as their associated CSS files.

When done, head over to the root index.js and uncomment the aforementioned components.

Add the following imports to the top of the file.

import Map from './components/map/'
import KeyFeatures from './components/keyFeatures/'

Assuming all is well, the app should now be running in the browser, almost the same as when we were using CodeSandbox.

Code migrated from CodeSandbox

You may notice that the font does not match what we had before. This is because CodeSandbox sets the default font to sans-serif. We will be using a CSS framework, called Spectre which will help us out with fonts later so we do not need to worry about this now.

How to enable support for CSS modules

To ensure feature parity with CodeSandbox, we need to add support for CSS modules. Parcel.js does not support CSS modules out-of-the-box, so we need to use a plugin.

PostCSS Modules

As Parcel.js has built in support for PostCSS, enabling CSS modules using that will be simplest and quickest.

First, install postcss-modules as follows;

npm install --save-dev postcss-modules

Now, to enable it, create a new file in src/components called .postcssrc, and add the following;

{
  "modules": true
}

Your project now has full support for CSS modules.

Summary

CodeSandbox served us well for getting our project up and running quickly, but now that our application is growing we want to "take it offline" and use our own build tool, ParcelJS. We discussed some ways of migrating from CodeSandbox, and how to set up Parcel.js, and then we completed the migration.

Next, we will start getting seriously deep into building out our application, so stay tuned!