Skip to content

Commit e7d4d9c

Browse files
SimonFlowerSimonFlower
authored
Migrate from Create React App to Vite; update dependencies (#42)
* Migrate from Create React App to Vite; update dependencies * Add GitHub action to automate page deployment from default branch * Add GitHub action to automate page deployment from default branch
1 parent 372ba8b commit e7d4d9c

32 files changed

Lines changed: 8887 additions & 13273 deletions

‎.github/workflows/pages.yml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
name: Build & Deploy (GitHub Pages)
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
workflow_dispatch:
7+
8+
# Required permissions for Pages deployments
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
# Only one deployment at a time to the Pages environment
15+
concurrency:
16+
group: "pages"
17+
cancel-in-progress: true
18+
19+
jobs:
20+
build:
21+
name: Build static site
22+
runs-on: ubuntu-latest
23+
steps:
24+
- name: Checkout
25+
uses: actions/checkout@v4
26+
27+
- name: Setup Node
28+
uses: actions/setup-node@v4
29+
with:
30+
node-version: '22'
31+
cache: 'npm'
32+
33+
- name: Install dependencies
34+
run: npm ci
35+
36+
- name: Build
37+
run: npm run build # produces ./dist by default
38+
39+
# Prepare Pages deployment
40+
- name: Configure Pages
41+
uses: actions/configure-pages@v5
42+
43+
# Package ./dist for Pages and upload as the artifact "github-pages"
44+
- name: Upload Pages artifact
45+
uses: actions/upload-pages-artifact@v3
46+
with:
47+
path: ./dist
48+
49+
deploy:
50+
name: Deploy to GitHub Pages
51+
runs-on: ubuntu-latest
52+
needs: build
53+
environment:
54+
name: github-pages
55+
url: ${{ steps.deployment.outputs.page_url }}
56+
steps:
57+
- name: Deploy
58+
id: deployment
59+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
# production
1212
/build
13+
/dist
1314

1415
# misc
1516
.DS_Store
@@ -21,3 +22,6 @@
2122
npm-debug.log*
2223
yarn-debug.log*
2324
yarn-error.log*
25+
26+
.eslintcache
27+
npm.log

‎README.md‎

Lines changed: 35 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,51 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
This project uses the React library to present Intermagnet Metadata from the Geomagnetism Community Metadata Database, which is hosted at BGS in the UK. The project was originally created using the [Create React App](https://github.com/facebook/create-react-app). Create React App was deprecated in 2025 and project was migrated to the [Vite framework](https://vite.dev/).
22

3-
## Available Scripts
3+
## Developing the project
44

5-
In the project directory, you can run:
5+
The project has been successfully compiled on Ubuntu, but development should be possible on any Linux distribution that can run [Node](https://nodejs.org/en). To set up a development environment:
66

7-
### `npm start`
7+
1. Install the Node Version Manager (nvm): https://github.com/nvm-sh/nvm
8+
1. Use nvm to install node V22:
89

9-
Runs the app in the development mode.<br>
10-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
10+
```
11+
nvm install 22
12+
nvm use 22
13+
```
1114

12-
The page will reload if you make edits.<br>
13-
You will also see any lint errors in the console.
15+
To install the project dependencies:
1416

15-
### `npm test`
17+
```
18+
# To do a clean install, remove transitory dependency files
19+
rm -rf node_modules package-lock.json
20+
# Install the dependencies
21+
npm install
22+
```
1623

17-
Launches the test runner in the interactive watch mode.<br>
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
24+
To run the project tests:
1925

20-
### `npm run build`
26+
```
27+
npm run test
28+
npm run test:watch # run tests and then wait for changes to files
29+
npm run test:coverage
30+
```
2131

22-
Builds the app for production to the `build` folder.<br>
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
32+
To run the project:
2433

25-
The build is minified and the filenames include the hashes.<br>
26-
Your app is ready to be deployed!
34+
```
35+
npm run dev
36+
```
2737

28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
38+
This will run a development server in the background and launch a web browser window where you can interact with the project components. The page will reload if you make edits. You will also see any lint errors in the console (you can run the linter separately: ```npm run lint```). The console also has a simple command structure allowing you to interact with the server - to see the available commands type "h<ENTER>".
2939

30-
### `npm run eject`
40+
To preview the project:
3141

32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
42+
```
43+
npm run build
44+
npm run preview
45+
```
3346

34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
47+
This will build the project's static pages in the ./dist folder, then run a web server to view these static pages. This mirrors the action taken during deployment, so is a further check that the project is working correctly before commiting changes to GitHub.
3548

36-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
49+
## Deploying the project
3750

38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39-
40-
## Learn More
41-
42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43-
44-
To learn React, check out the [React documentation](https://reactjs.org/).
45-
46-
### Code Splitting
47-
48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49-
50-
### Analyzing the Bundle Size
51-
52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53-
54-
### Making a Progressive Web App
55-
56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57-
58-
### Advanced Configuration
59-
60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61-
62-
### Deployment
63-
64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65-
66-
### `npm run build` fails to minify
67-
68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
51+
A GitHub action (in .github/workflows/pages.yml) builds the Vite + React app and deploys the resulting static site to GitHub Pages. All pushes to the default branch on GitHub will trigger the deployment of the site (pushes to other branches will not cause a deployment to take place).

‎eslint.config.mjs‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// eslint.config.mjs
2+
import js from '@eslint/js';
3+
import react from 'eslint-plugin-react';
4+
import reactHooks from 'eslint-plugin-react-hooks';
5+
import globals from 'globals';
6+
7+
export default [
8+
// 1) GLOBAL IGNORES (apply to everything ESLint scans)
9+
{
10+
ignores: [
11+
'**/dist/**', // compiled output
12+
'**/node_modules/**',
13+
'public/**', // adjust if you keep assets here
14+
'*.min.js'
15+
]
16+
},
17+
18+
19+
// 2) Make the React version setting GLOBAL so the plugin never warns
20+
{ settings: { react: { version: 'detect' } } },
21+
22+
// 3) Base JS rules
23+
js.configs.recommended,
24+
25+
// 4) React preset (flat)
26+
react.configs.flat.recommended, // <- provides JSX-aware rules like react/jsx-uses-vars
27+
28+
// 5) React (JS/JSX) in src/
29+
{
30+
files: ['src/**/*.{js,jsx}'],
31+
languageOptions: {
32+
ecmaVersion: 'latest',
33+
sourceType: 'module',
34+
parserOptions: {
35+
ecmaFeatures: { jsx: true }, // enable JSX parsing
36+
},
37+
globals: { ...globals.browser },
38+
},
39+
plugins: {
40+
react,
41+
'react-hooks': reactHooks,
42+
},
43+
rules: {
44+
'react/react-in-jsx-scope': 'off',
45+
'react-hooks/rules-of-hooks': 'error',
46+
'react-hooks/exhaustive-deps': 'warn',
47+
}
48+
}
49+
];

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Intermagnet Metadata App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.jsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)