Merge pull request #356 from policy-design-lab/issue_352_node_20_upgrade

Upgrade node from 16 directly to 22

.github/workflows/test.yaml

@@ -9,12 +9,12 @@ jobs:
 
     steps:
       - name: Set up Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 20.x
 
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Cache dependencies
         uses: actions/cache@v2

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 - Move IRA table columns [#338](https://github.com/policy-design-lab/pdl-frontend/issues/338)
+- Upgraded the node version from 16 to 22, including Dockerfile and GitHub Actions [#352](https://github.com/policy-design-lab/pdl-frontend/issues/352)
 
 ## [1.5.0] - 2024-12-10
 

Dockerfile

@@ -1,7 +1,7 @@
 # ----------------------------------------------------------------------
 # Build application using node
 # ----------------------------------------------------------------------
-FROM node:14.5.0-alpine AS builder
+FROM node:22.12.0-alpine AS builder
 WORKDIR /usr/src/app
 ARG APP_ENV=""
 ENV APP_ENV=${APP_ENV}
@@ -20,6 +20,6 @@ RUN npm run build
 # ----------------------------------------------------------------------
 # Include nginx web server and host the build
 # ----------------------------------------------------------------------
-FROM nginx:1.19.1-alpine
+FROM nginx
 COPY --from=builder /usr/src/app/build/ /usr/share/nginx/html/
 COPY nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -1,92 +1,24 @@
-## React Template
+## Repo
 
-A template for React web applications
-
-This template is configured with the latest LTS version of Node (v14).
-
-### Bundling (webpack):
-
-Use `npm start` to start the dev server.
-
-Use `npm run build` to create production build.
-
-- The dev server runs on port 3000.
-- The bundle is put in `build` folder.
-- Babel presets are configured in `babel.config.json`.
-- The main entrypoint is `src/app.tsx`.
-- The only included polyfills are from `@babel/polyfill`. Custom polyfills can be added in `src/polyfill.js`.
-- The current config only supports css. CSS frameworks such as SASS and Less can be enabled in `module.rules` in `webpack.common.js`.
-
-#### Config files:
-
-- `webpack.common.js` (shared config)
-- `webpack.dev.js`
-- `webpack.prod.js`
-
-#### Plugins:
-
-`HtmlWebpackPlugin`: Uses `src/index.html` as the main entrypoint for the project.
-
-`DefinePlugin`: Defines the following environment variables:
-
-| Variable      | default value                       | Notes |
-|---------------|-------------------------------------|-------|
-| `ENV`         | `test`, `development`, `production` | The value is set automatically based on the running environment |
-| `PUBLIC_PATH` | `/`                                 | The context that the app is running in (e.g. `/app` if the app is accessible at `https://<domain>/app`). It can be set via `PUBLIC_PATH` environment variable and must end with a slash. |
-
-`FaviconsWebpackPlugin`: Generates favorite icons from the image in `src/images/favicon.png`.
-
-`MiniCssExtractPlugin`: Extracts the styling from JS files into css files.
-
-`CleanWebpackPlugin`: Removes and cleans up the build folder before a new build.
-
-`BundleAnalyzerPlugin`: Provides information and analytics on the generated bundle. It can be accessed on `localhost:8081` and is only available in development mode.
-
-### Typescript:
-
-- See `tsconfig.json` for customized features.
-- Global types are in `src/types/index.d.ts`.
-
-### Linting (Eslint + Prettier):
-
-Use `npm run lint` to see a list of linting issues.
-
-Use `npm run lint:fix` to fix those issues that can be handled automatically.
-
-- See `.prettierrc` for Prettier configs.
-- See `.eslintrc` for Eslint configs and `.eslintignore` for the ignored patterns.
-
-### Testing (Jest):
-
-Use `npm run test` to run the test units.
-
-Use `npm run test:watch` to start the test runner in watch mode.
-
-- See `jest.config.js` for customized features.
-- Jest is called with `coverage` flag to report code coverage.
-- Uses the following patterns to discover tests:
-  - `**/__tests__/**/*.[jt]s?(x)`
-  - `**/?(*.)+(spec|test).[tj]s?(x)`
-
-### Documentation (Typedoc):
-
-Use `npm run docs` to generate docs.
-
-- Configured in `typedoc.json`.
-- Generated documentation is put in `docs` folder.
-
-### Pre-commit hooks (Husky + lint-staged):
-
-- Configured in `.huskyrc` and `.lintstagedrc`. The only check is `eslint` rules.
-
-### Repo
-
-The repo has one Github workflow that checks the linting rules and runs the tests (see `.github/workflows/test.yaml`).
-There are issue and PR templates in `.github`.
+This repo is the front-end of the Policy Design Lab (https://policydesignlab.ncsa.illinois.edu). README is under development.
 
 ### Run Docker container locally for development
 
 - In a terminal, `export APP_ENV=development` to point to development environment
 - Build the image and pass in the build environment `docker build --no-cache --build-arg APP_ENV="${APP_ENV}" --progress=plain --tag pdl/pdl-frontend .`
 - Run the container `docker run -p 3000:80 pdl/pdl-frontend:latest`
 - Go to http://localhost:3000
+
+### Upgrade node version
+
+To upgrade the node version, following the steps below:
+1. Run `rm -rf node_modules package-lock.json` to remove the old node modules.
+2. If you use `nvm` as package manager, update the `.nvmrc` file with the new node version.
+3. Make sure you do `nvm use` to use the new node version.
+4. Run `npm install -g npm@latest` to update npm.
+5. Run `npm install` to update the node modules.
+6. Update the `Dockerfile` with the new node version by changing the `FROM` line.
+7. Modify the `test.yaml` in the `.github/workflows` folder to use the new node version for lint checking. You don't need to update another file.
+8. Test the application locally to make sure everything works fine.
+9. Test the application using Docker to make sure everything works fine.
+