Upgrade project seed to parcel

.env

@@ -0,0 +1,6 @@
+APP_TITLE=Project Seed
+APP_DESCRIPTION=Starter application by Development Seed
+
+# If the app is being served in from a subfolder, the domain url must be set.
+# For example, if the app is served from /mysite:
+# PUBLIC_URL=http://example.com/mysite

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint", // Specifies the ESLint parser
+  "parser": "@babel/eslint-parser", // Specifies the ESLint parser
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
@@ -17,6 +17,13 @@
   },
   "plugins": ["react", "react-hooks", "inclusive-language"],
   "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+      ]
+    },
     "ecmaFeatures": {
       "jsx": true
     },

.github/_workflow-samples/README.md

@@ -4,7 +4,12 @@ A workflow that builds the site and deploys it to S3.
 This workflow gets triggered with every push to the main branch, and doesn't verify if the checks were successful. It relies on branch protection to do so.
 
 ## First-time setup
-- create a bucket on S3 and enable 'Static website hosting' with both the Index and Error document set to `index.html`.
+- create a bucket on S3 and enable 'Static website hosting' with both the Index and Error document set to `index.html`. To do this programmatically:
+  ```
+  aws s3 mb [BUCKET NAME]
+  aws s3 website [BUCKET NAME] --index-document index.html --error-document index.html
+  aws s3api put-bucket-tagging --bucket [BUCKET NAME] --tagging 'TagSet=[{Key=Project,Value=[PROJECT TAG]}]'
+  ```
 - create an IAM with a policy that provides it with programmatic access to the bucket
 - add the AWS Access Key and Secret from the IAM [as encrypted secrets to the project repository](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository). Use `AWS_ACCESS_KEY_ID` & `AWS_SECRET_ACCESS_KEY`
 - add the bucket name as an evironemnt variable (`DEPLOY_BUCKET`) to the deploy workflow. Omit `s3://` from the bucket name.

.github/_workflow-samples/deploy-s3.yml

@@ -9,7 +9,7 @@ on:
     - 'main'
 
 env:
-  NODE: 14
+  NODE: 16
   DEPLOY_BUCKET:
 
 jobs:
@@ -60,7 +60,7 @@ jobs:
 
       - name: Restore dist cache
         uses: actions/cache@v2
-        id: cache-node-modules
+        id: cache-dist
         with:
           path: dist
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}

.github/_workflow-samples/deploy-surge.yml

@@ -9,7 +9,7 @@ on:
     - 'main'
 
 env:
-  NODE: 14
+  NODE: 16
   SURGE_DOMAIN:
 
 jobs:

.github/workflows/checks.yml

@@ -18,7 +18,7 @@ on:
       - ready_for_review
 
 env:
-  NODE: 14
+  NODE: 16
 
 jobs:
   prep:

.gitignore

@@ -17,49 +17,7 @@
 # to fit your needs!
 ################################################
 
-
-################################################
-# Local Configuration
-#
-# Explicitly ignore files which contain:
-#
-# 1. Sensitive information you'd rather not push to
-#    your git repository.
-#    e.g., your personal API keys or passwords.
-#
-# 2. Environment-specific configuration
-#    Basically, anything that would be annoying
-#    to have to change every time you do a
-#    `git pull`
-#    e.g., your local development database, or
-#    the S3 bucket you're using for file uploads
-#    development.
-#
-################################################
-
-app/assets/scripts/config/local.js
-app/assets/scripts/styles/collecticons/catalog.json
-
-################################################
-# Dependencies
-#
-# When releasing a production app, you may
-# consider including your node_modules and
-# bower_components directory in your git repo,
-# but during development, its best to exclude it,
-# since different developers may be working on
-# different kernels, where dependencies would
-# need to be recompiled anyway.
-#
-# More on that here about node_modules dir:
-# http://www.futurealoof.com/posts/nodemodules-in-git.html
-# (credit Mikeal Rogers, @mikeal)
-#
-# About bower_components dir, you can see this:
-# http://addyosmani.com/blog/checking-in-front-end-dependencies/
-# (credit Addy Osmani, @addyosmani)
-#
-################################################
+app/scripts/time.json
 
 node_modules
 bower_components
@@ -81,6 +39,7 @@ lib-cov
 *.pid
 npm-debug.log
 yarn-error.log
+.parcel-cache
 
 
 ################################################
@@ -89,8 +48,6 @@ yarn-error.log
 # Common files generated by apidocs and other docs
 ################################################
 
-_README.md
-
 
 ################################################
 # Miscellaneous
@@ -111,4 +68,5 @@ nbproject
 temp
 tmp
 .tmp
-dist
+dist
+parcel-bundle-reports

.nvmrc

@@ -1 +1 @@
-14
+16

.parcelrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["@parcel/config-default"],
+  "reporters": ["...", "@parcel/reporter-bundle-analyzer"]
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Development Seed
+Copyright (c) 2022 Development Seed
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,108 +1,42 @@
 # project-seed
 
-A basic starting point for web projects that use [styled-components](https://www.styled-components.com/).
+A basic starting point for web projects that uses parcel as a Build System.  
+This is the result of a [build system research](https://github.com/developmentseed/project-seed/issues/97) and [experimentation](https://github.com/danielfdsilva/parcel-gulp/).  
 
-Since style components need react, it is already included.  
-It also includes collecticons. See the section below for more info.
+For the previous version of project-seed, that used browserify see [tag v4.0.0](https://github.com/developmentseed/project-seed/tree/v4.0.0).
 
 ## Overview
 
 Steps to follow as soon as you download this structure to start a project:
 - [ ] Update `package.js` with data about the project (name, repo, license...)
 - [ ] If the license is known update `LICENSE`
 - [ ] Check `index.html` for bootstrap information that can be changed or removed.
-- [ ] Update the application title and description in `/app/assets/scripts/config/production.js`
+- [ ] Update the application title and description in `.env`
 - [ ] Remove unneeded images from the `graphics` folder and replace the favicon with a project related one.
 - [ ] Update the modules to the most recent version.
 - [ ] **Delete this `README.md` and rename `_README.md`. Fill in the needed data. This is the most important task.** Others need to be able to know what the project is about and how to work with it. This can't be stressed enough.
 
 It's better to do this straight away so no traces of project-seed are ever pushed to github and just looks more professional.
 The values that are not immediately know should be left blank and filled ASAP.
 
-## Gulp for building
-The build system currently supports:
+## Parcel for building, Gulp to orchestrate
 
-- Image optimization
-- Watchify for JS bundling
-- Minification/uglification where appropriate
-- Serving and live reloading of pages
+[Parcel](https://parceljs.org/) is used to bundle all the needed assets for the application, but there are some edge cases in some projects that parcel can't handle very well. Anything that must happen outside the final bundle, parcel can't deal with properly. For example, [parcel's static file plugin](https://github.com/elwin013/parcel-reporter-static-files-copy) will just copy the files to the dist folder, [without watching them](https://github.com/elwin013/parcel-reporter-static-files-copy#flaws-and-problems) for changes.
+
+To solve this problem, [Gulp](https://gulpjs.com/) is used to orchestrate tasks. With it, tasks can be setup to do all that is needed, and then parcel is executed to bundle the app.  
+
+Unless you have a use case that needs data processing you shouldn't have to touch the gulpfile. For an example of extra tasks see the [research repo](https://github.com/danielfdsilva/parcel-gulp/).
 
 There are two commands, both run via [`yarn`](https://yarnpkg.com/en/).
 
 - `yarn build` - clean & build everything and put it into dist folder
 - `yarn serve` - serve the pages and utilize live reload on changes to fonts, images, scripts and HTML.
 
 
-## Assets Structure
-
-```
-app/assets/
-|
-+- scripts/: The user scripts
-|  |
-|  +- config/: configuration files (see configuration section)
-|  |
-|  +- styles/: the styled components
-|
-+- vendor/: Any third-party script that can't be required()
-|
-+- graphics/: Images for the site divided in:
-|  |
-|  +- layout/: Images for layout elements (Ex: background images)
-|  +- meta/: Images for the meta tags (Mostly icons and facebook images)
-|  +- content/: Content image
-|
-```
-
-## Collecticons
-Collecticons comes bundles with `project-seed`. SVG icons go inside `app/assets/icons/collecticons` and they're compiled into a webfont.  
-
-To use them with styled components:
-```js
-import collecticon from './styles/collecticons'; // Import the font from app/assets/scripts/styles/collecticons/index
-
-// The icon name will be the icon's file name
-const CloseBtn = styled.button`
-  &::before {
-    ${collecticon('xmark--small')}
-  }
-`
-```
-
-#### Remove collecticons
-If you don't need collecticons, it is easy to remove:  
-1) From `app/assets/scripts/styles/global.js` remove the inclusion of `collecticonsFont`  
-
-2)  
-```
-rm -rf app/assets/icons/collecticons
-rm -rf app/assets/scripts/styles/collecticons
-yarn remove collecticons-processor
-```
-
-3) You also need to manually remove the build task from `gulpfile.js`
-
 ### Configurations and environment variables
 
-At times, it may be necessary to include options/variables specific to `production`, `staging` or `local` in the code. To handle this, there is a master config.js file. This file should not be modified.  Instead, modify one of:
-
-- config/production.js - production settings
-- config/staging.js - overrides the production settings for staging server (basically Travis not on the DEPLOY branch)
-- config/local.js - local (development) overrides. This file is gitignored, so you can safely change it without polluting the repo.
-
-When developing locally with `yarn run serve`, the default will be to use `production.js` (with overrides from `local.js`).  However, if you need to run with the staging settings, use: `yarn run stage` (this will not start a server)
-
-### How scripts are built
-
-The script build, which uses `browserify`, outputs two js files: `bundle.js` and
-`vendor.js`:
- - `bundle.js`, created by the `javascript` task in deployment and by
-   `watchify` during development, contains all the app-specific code:
-   `app/scripts/main.js` and all the scripts it `require`s that are local to
-   this app.
- - `vendor.js`, created by the `vendorBundle` task, contains all the external
-   dependencies of the app: namely, all the packages you install using `yarn
-   add ...`.
+At times, it may be necessary to include options/variables specific to `production`, `staging` or `local` in the code. To handle this, there you can use `.env` files.
+See Parcel documentation on [env variables](https://parceljs.org/features/node-emulation/#environment-variables).
 
 ## Github Actions for CI
 Testing and deployment is taken care of by Github Actions. It is set up to:

_README.md

@@ -3,13 +3,12 @@
 {{Description}}
 
 ## Installation and Usage
-
 The steps below will walk you through setting up your own instance of the project.
 
 ### Install Project Dependencies
 To set up the development environment for this website, you'll need to install the following on your system:
 
-- [Node](http://nodejs.org/) (see [.nvmrc](./.nvmrc)) (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
+- [Node](http://nodejs.org/) v16 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
 - [Yarn](https://yarnpkg.com/) Package manager
 
 ### Install Application Dependencies
@@ -26,35 +25,25 @@ Install Node modules:
 yarn install
 ```
 
-### Usage
+## Usage
 
-#### Config files
-All the config files can be found in `app/assets/scripts/config`.
-After installing the projects there will be 3 main files:
-  - `local.js` - Used only for local development. On production this file should not exist or be empty.
-  - `staging.js`
-  - `production.js`
+### Config files
+Configuration is done using [dot.env](https://parceljs.org/features/node-emulation/#.env-files) files.
 
-The `production.js` file serves as base and the other 2 will override it as needed:
-  - `staging.js` will be loaded whenever the env variable `DS_ENV` is set to staging.
-  - `local.js` will be loaded if it exists.
+These files are used to simplify the configuration of the app and should not contain sensitive information.
 
-The following options must be set: (The used file will depend on the context):
-  - `value` - Description
+Run the project locally by copying the `.env` to `.env.local` and setting the following environment variables:
 
-Example:
-```
-module.exports = {
-  value: 'some-value'
-};
-```
 
-#### Starting the app
+| --- | --- |
+| `{{VARIABLE}}` | {{description}} |
+
+### Starting the app
 
 ```
 yarn serve
 ```
-Compiles the javascript and launches the server making the site available at `http://localhost:9000/`
+Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:9000/`
 The system will watch files and execute tasks whenever one of them changes.
 The site will automatically refresh since it is bundled with livereload.
 
@@ -70,3 +59,10 @@ yarn stage
 ```
 This will package the app and place all the contents in the `dist` directory.
 The app can then be run by any web server.
+
+**When building the site for deployment provide the base url trough the `PUBLIC_URL` environment variable. Omit the leading slash. (E.g. https://example.com)**
+
+If you want to use any other parcel feature it is also possible. Example:
+```
+PARCEL_BUNDLE_ANALYZER=true yarn parcel build app/index.html
+```