Skip to content

Latest commit

 

History

History
59 lines (38 loc) · 1.96 KB

README.md

File metadata and controls

59 lines (38 loc) · 1.96 KB
Raw

Parcel + React Example Project

It's my exercise project on using React with Parcel.

How to run & build

This is a Parcel based project, written using VSCode.

To init, run

$ npm update

To open development server, run

$ npm run start

by default it will be opened on port 3310 (in your browser input http://localhost:3310). To change this, see package.json.

To build distributables for production, delete everything in dist/, then run

$ npm run build

the files will be found in dist/. Just keep in mind that they cannot be executed locally, using file:/// URL.

For more info, check Parcel website.

Managing dependencies

  • npm install --save-dev <package> Install package in the development environment of this project.
  • npm uninstall <package> Removes package from this project.
  • npm install --location=global <package> Installs a package globally. For portability, you still need to use install --save-dev when a project needs a package, but this procedure won't require Internet connection since files will be copied from global.

So to start a Parcel project in an empty directory, simply use npm install --save-dev parcel.

Since we build HTML/CSS/JS for production, no packages will be required in production environment.

Used file formats and required packages

  • HTML .html
  • Typescript with JSX .tsx
  • SASS .scss, requires sass @parcel/transformer-sass.

Also, using React in Typescript requires react @types/react @types/react-dom.

The directory structure

  • .parcel-cache Cache. Should be excluded from Git.
  • node_modules The project's npm modules repo. Should be excluded from Git.
  • src The source code of the project.
  • types Extra type definitions for TypeScript.
  • package.json Project and dependecy info.
  • package-lock.json Extra package info. Should be excluded from Git.
  • tsconfig.json Configures TypeScript behavior in VSCode.