Merge pull request #116 from developmentseed/feature/v8

Version 8

Author: danielfdsilva

.env

@@ -1,6 +1,6 @@
-APP_TITLE=Project Seed
-APP_DESCRIPTION=Starter application by Development Seed
+VITE_APP_TITLE=Project Seed
+VITE_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
+# BASE_URL=http://example.com/mysite

.github/_workflow-samples/README.md

@@ -12,7 +12,7 @@ This workflow gets triggered with every push to the main branch, and doesn't ver
   ```
 - 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.
+- add the bucket name as an environment variable (`DEPLOY_BUCKET`) to the deploy workflow. Omit `s3://` from the bucket name.
 
 ## Serving site from sub-path
 This workflow assumes that the site is served from the root of the URL (eg. devseed.com). To support a URL served from a sub-path (eg. devseed.com/explorer), add the following step:

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

@@ -23,30 +23,34 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-node-modules
         with:
           path: node_modules
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
 
       - name: Cache dist
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-dist
         with:
           path: dist
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
 
       - name: Install
-        run: npm install
+        run: pnpm install
 
       - name: Build
-        run: npm run all:build
+        run: pnpm build
 
   deploy:
     runs-on: ubuntu-latest
@@ -57,7 +61,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Restore dist cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-dist
         with:
           path: dist

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

@@ -8,69 +8,75 @@ on:
     branches:
     - 'main'
 
-env:
-  NODE: 18
-  DEPLOY_BUCKET:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 
     steps:
-      - name: Cancel Previous Runs
-        uses: styfle/[email protected]
-        with:
-          access_token: ${{ github.token }}
-
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
 
       - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE }}
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-node-modules
         with:
           path: node_modules
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
 
       - name: Cache dist
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-dist
         with:
           path: dist
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
 
       - name: Install
-        run: yarn install
+        run: pnpm install
 
       - name: Build
-        run: yarn build
+        run: pnpm build
 
   deploy:
     runs-on: ubuntu-latest
     needs: build
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Restore dist cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-dist
         with:
           path: dist
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
 
+        # Action: https://github.com/marketplace/actions/s3-deploy
       - name: Deploy to S3
-        uses: jakejarvis/s3-sync-action@master
+        uses: reggionick/s3-deploy@v4
         with:
-          args: --acl public-read --follow-symlinks --delete
-        env:
-          AWS_S3_BUCKET: ${{ env.DEPLOY_BUCKET }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          SOURCE_DIR: ./dist
+          folder: dist
+          bucket: ${{ secrets.S3_BUCKET }}
+          bucket-region: ${{ secrets.S3_BUCKET_REGION }}
+          dist-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
+          invalidation: /
+          delete-removed: true
+          no-cache: true
+          private: true
+          files-to-include: '{.*/**,**}'

.github/workflows/checks.yml

@@ -17,9 +17,6 @@ on:
       - reopened
       - ready_for_review
 
-env:
-  NODE: 20
-
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
@@ -33,20 +30,24 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE }}
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-node-modules
         with:
           path: node_modules
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
 
       - name: Install
-        run: npm install
+        run: pnpm install
 
   lint:
     needs: prep
@@ -56,23 +57,27 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE }}
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-node-modules
         with:
           path: node_modules
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
 
       - name: Install
-        run: npm install
+        run: pnpm install
 
       - name: Lint
-        run: npm run lint
+        run: pnpm lint
 
   test:
     needs: prep
@@ -82,20 +87,24 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE }}
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-node-modules
         with:
           path: node_modules
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
 
       - name: Install
-        run: npm install
+        run: pnpm install
 
       - name: Test
-        run: npm run test
+        run: pnpm run test

.nvmrc

@@ -1 +1 @@
-20
+22

README.md

@@ -1,4 +1,4 @@
-# project-seed v7
+# project-seed v8
 
 A basic starting point for web projects that uses parcel as a Build System. 
 
@@ -18,22 +18,24 @@ Steps to follow as soon as you download this structure to start a project:
 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.
 
-## Parcel for building, node to orchestrate
+## Vite for building
 
-[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.
+[Vite](https://vite.dev/) is used to bundle all the needed assets for the application.
+There are two commands, both run via `pnpm`
 
-To solve this problem, some node glue code 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.  
+- `pnpm build` - clean & build everything and put it into dist folder
+- `pnpm serve` - serve the pages and utilize live reload on changes to fonts, images, scripts and HTML.
 
-There are two commands, both run via `npm`
+## Chakra UI for styling
 
-- `npm run build` - clean & build everything and put it into dist folder
-- `npm run serve` - serve the pages and utilize live reload on changes to fonts, images, scripts and HTML.
+Project Seed uses [Chakra UI](https://chakra-ui.com/) for styling as a UI framework. It is a component library that provides a set of accessible and reusable components facilitating the development of web applications.
 
+If you don't want it, you just need to remove the `@chakra-ui/react` dependency from the `package.json` and remove the import from the `main.tsx` file.
 
 ### 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 you can use `.env` files.
-See Parcel documentation on [env variables](https://parceljs.org/features/node-emulation/#environment-variables).
+See Vite's documentation on [env variables](https://vite.dev/guide/env-and-mode.html#env-variables-and-modes).
 
 ## Github Actions for CI
 Testing and deployment is taken care of by Github Actions. It is set up to:

_README.md

@@ -8,7 +8,8 @@ The steps below will walk you through setting up your own instance of the projec
 ### 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/) v20 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
+- [Node](http://nodejs.org/) v22 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
+- [pnpm](https://pnpm.io/) Install using corepack (`corepack enable pnpm`)
 
 ### Install Application Dependencies
 
@@ -21,7 +22,7 @@ nvm install
 Install Node modules:
 
 ```
-npm install
+pnpm install
 ```
 
 ## Usage
@@ -40,7 +41,7 @@ Run the project locally by copying the `.env` to `.env.local` and setting the fo
 ### Starting the app
 
 ```
-yarn serve
+pnpm serve
 ```
 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.
@@ -50,18 +51,13 @@ The site will automatically refresh since it is bundled with livereload.
 To prepare the app for deployment run:
 
 ```
-npm run build
+pnpm build
 ```
 or
 ```
-npm run stage
+pnpm 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 npm run parcel build app/index.html
-```
+**When building the site for deployment provide the base url trough the `BASE_URL` environment variable. Omit the leading slash. (E.g. https://example.com)**

app/scripts/main.tsx renamed to app/main.tsx

@@ -1,8 +1,11 @@
+import { ChakraProvider } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import system from './styles/theme';
+
 // If using a router add the public url to the base path.
-// const publicUrl = process.env.PUBLIC_URL || '';
+// const publicUrl = process.env.BASE_URL || '';
 
 // Root component.
 function Root() {
@@ -13,7 +16,11 @@ function Root() {
     setTimeout(() => banner.remove(), 500);
   }, []);
 
-  return <p>Hello from Starter</p>;
+  return (
+    <ChakraProvider value={system}>
+      <p>Hello World</p>
+    </ChakraProvider>
+  );
 }
 
 const rootNode = document.querySelector('#app-container')!;