(2) Install nodejs and required packages using Terminal Command
- shell script Select all
sudo apt install nodejs npm
mkdir -p ~/webappreact
cd ~/webappreact
npm init -y
#Change the following file in ~/webappreact/package.json as
cat > ~/webappreact/package.json <<EOF
{
"name": "webappreact",
"version": "1.0.0",
"description": "",
"scripts": {
"glogin": "clasp login",
"glogout": "clasp logout",
"gcreate": "clasp create --title 'React Test Project' --rootDir ./apps-script",
"gpush": "clasp push",
"gpull": "clasp pull",
"gstart": "clasp push --watch",
"build": "parcel build src/index.html --dist-dir ./apps-script",
"start": "parcel src/index.html --dist-dir ./apps-script"
},
"keywords": [],
"author": "",
"license": "ISC"
}
EOF
# install dependencies
npm install -D @google/clasp
npm install -D @types/google-apps-script # if you use VS Code Editor in ChromeOS
npm install -D parcel
npm install react react-dom
mkdir -p ~/webappreact/apps-script
# create ~/webappreact/apps-script/main.js as
cat > ~/webappreact/apps-script/main.js <<EOF
function doGet() {
return HtmlService.createTemplateFromFile("index")
.evaluate()
.addMetaTag("viewport","width=device-width, initial-scale=1.0")
}
EOF
mkdir -p ~/webappreact/src
# create ~/webappreact/src/index.html as
cat > ~/webappreact/src/index.html <<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
EOF
# create ~/webappreact/src/index.js as
cat > ~/webappreact/src/index.js <<EOF
import React from "react"
import App from "./App"
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />, app)
EOF
# create ~/webappreact/src/App.js as
cat > ~/webappreact/src/App.js <<EOF
function App() {
return <div>
<h1>First React App</h1>
<p>Hello World</p>
</div>
}
export default App
EOF
(3) Test building and push to Google Drive using Terminal Command
- shell script Select all
# Testing building
cd ~/webappreact
npm run build
# Testing running in localhost:1234
# For Chrome Browser, please install React Developer Tools in chrome web store for testing at localhost
npm run start
# Login in to google apps script
npm run glogin
# Create Project in google apps script and choose spreadsheet
npm run gcreate
mv ~/webappreact/apps-script/.clasp.json ~/webappreact/
# Push to google apps script
npm run gpush
(4) Browser Go to https://script.google.com/home and deploy the React Test Project as webapp and test
(5) Add CSS and react-router
- shell script Select all
mkdir -p ~/webappreact/src/styles/
#Add ~/webappreact/src/styles/main.scss as
cat > ~/webappreact/src/styles/main.scss <<EOF
h1 {
color:green;
font-size: 2rem;
}
p {
color:purple;
}
.css-nav {
padding-left: 15px;
padding-right: 15px;
}
EOF
# change ~/webappreact/src/index.html as
cat > ~/webappreact/src/index.html <<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import "./styles/main.scss";
</style>
</head>
<body>
<div id="app"></div>
<script type="module">
import "./index.js"
</script>
</body>
</html>
EOF
# install dependencies
npm install react-router-dom@6
mkdir -p ~/webappreact/src/components
# create ~/webappreact/src/components/Home.js as
cat > ~/webappreact/src/components/Home.js <<EOF
function Home() {
return <>
<h1>HomePage</h1>
</>
}
export default Home
EOF
# create ~/webappreact/src/components/About.js as
cat > ~/webappreact/src/components/About.js <<EOF
function About() {
return <>
<h1>About</h1>
</>
}
export default About
EOF
# create ~/webappreact/src/components/Nav.js as
cat > ~/webappreact/src/components/Nav.js <<EOF
import { Link } from "react-router-dom"
function Nav() {
return <>
<span className="css-nav"><Link to="/">Home</Link></span>
<span className="css-nav"><Link to="/about">About</Link></span>
</>
}
export default Nav
EOF
# change ~/webappreact/src/index.js as
cat > ~/webappreact/src/index.js <<EOF
import React from "react"
import { BrowserRouter } from "react-router-dom"
import App from "./App"
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<BrowserRouter><App /></BrowserRouter>)
EOF
# change ~/webappreact/src/App.js as
cat > ~/webappreact/src/App.js <<EOF
import { Routes, Route } from "react-router-dom"
import Home from "./components/Home"
import About from "./components/About"
import Nav from "./components/Nav"
function App() {
return <>
<Nav />
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="*" element={<Home />} />
</Routes>
</>
}
export default App
EOF
(6) Test building and push to Google Drive using Terminal Command
- shell script Select all
# Testing building
cd ~/webappreact
npm run build
# Testing running in localhost:1234
npm run start
# Push to google apps script
npm run gpush
# test again in webapp of Google Apps Script
(7) Add google apps script getData() function as backend
- shell script Select all
# Change ~/webappreact/apps-script/main.js as
cat > ~/webappreact/apps-script/main.js <<EOF
function doGet() {
return HtmlService.createTemplateFromFile("index")
.evaluate()
.addMetaTag("viewport","width=device-width, initial-scale=1.0")
}
function getData() {
return (
[{
"key": "apple",
"value": "green"
},
{
"key": "banana",
"value": "yellow"
}]
);
}
function getSpreadData() {
return SpreadsheetApp
.getActiveSpreadsheet()
.getActiveSheet()
.getDataRange()
.getValues();
}
EOF
# Change ~/webappreact/src/components/About.js as
cat > ~/webappreact/src/components/About.js <<EOF
import React, {useState, useEffect} from "react"
function About() {
const [data,setData] = useState(null)
const [loading, setLoading] = useState(false)
if (typeof google === 'object') {
useEffect(()=>{
setLoading(true)
google.script.run.withSuccessHandler(response => {
setData([...response])
setLoading(false)
}).withFailureHandler(er => {
alert(er)
}).getData()
},[])
}
else {
return <>
<h1>About</h1>
<table>
<tbody>
<tr>
<td><span style={{paddingLeft:'30px',paddingRight:'30px'}}>key: row.key</span></td>
<td><span style={{paddingRight:'30px'}}>value: row.value</span></td>
</tr>
</tbody>
</table>
</>
}
if (loading) return <h1>loading...</h1>
if (!data) return null;
return <>
<h1>About Data</h1>
<table>
<tbody>
{
data.map((row) => (
<tr>
<td><span style={{paddingLeft:'30px',paddingRight:'30px'}}>key: {row.key}</span></td>
<td><span style={{paddingRight:'30px'}}>value: {row.value}</span></td>
</tr>
))
}
</tbody>
</table>
</>
}
export default About
EOF
(8) Push to Google Drive and test in Google Apps Script Web App
- shell script Select all
# Testing building and Push to google apps script
cd ~/webappreact
npm run build && npm run gpush
# test again in webapp of Google Apps Script
