Menu
Has anyone tried deploying a React front end to a Google Apps Script web app? I'm trying to build a single page front end that calls some of the Google Apps Script apis, like get a list of drive files and save some results to a spreadsheet. However, all the React docs seem to assume I'm using a Node.js backend and don't focus much on custom build/deploy situations. If you have seen even a simple hello world for React with Google Apps Script, would be much appreciated! Thanks.
643
This repo is a boilerplate project that uses React and the same development tools that you use for building traditional websites, all inside Google Apps Script projects.
React is a front-end framework that makes it easy to create user interfaces from components using Javascript. Put these together, and you have a powerful combination of tools for creating robust websites without relying on Java or PHP frameworks that are often difficult to learn and use.
If you are in the code editor, and want to stop a script from running, you can click the "cancel" link in the toast display. Or you can click "View" -> "Executions" from the code editor and then terminate the script.
On the other hand, ReactJS is just a library so it's good for SPA (Single page application) or where it doesn't require much formatting. Angular is used by companies Google, Forbes, Youtube, Wix, telegram and React is used by companies Facebook, Instagram, Twitter, Airbnb, Netflix, Paypal, Uber.
Lot of great projects here. Also including a full-featured demo app, showing how to use React with google apps script:
https://github.com/enuchi/React-Google-Apps-Script
It uses clasp and webpack, so you can use all the new javascript you want for your .gs server-side code (such as arrow functions, const/let, etc.)
38
I have zero experience with React, but their starter 'Hello, World' example from the docs is working as expected inside HTML templates. The script below is spreadsheet-bound, but the same is applicable to web apps.
Note that the attribute type="text/babel" for the <script> tag is required.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body id="root">
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
</script>
</body>
</html>
Result in Google Sheets sidebar:
135
I was totally inspired by Anton's amazing idea!! So great!! To add to his idea here is an appscript with module like behaviour and a base App class and I have added redux into the mix.
Code.gs
function include(filename) {
Logger.log(filename)
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function onOpen() {
SlidesApp.getUi().createMenu('Picker')
.addItem('Start', 'showSidebar')
.addToUi();
}
function showSidebar() {
var ui = HtmlService.createTemplateFromFile('Index').evaluate().setTitle(
'Flashcards');
SlidesApp.getUi().showSidebar(ui);
}
App.js.html
<script type="text/babel">
class App extends React.Component {
constructor(){
super();
}
render() {
return (
<div>Hello World</div>
)
}
}
</script>
index.js.html - without redux
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
index.js.html - with redux
<script type="text/babel">
const Provider = ReactRedux.Provider
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
</script>
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
// Libraries for adding redux
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<?!= include('App.js'); ?>
// pull in redux if and when needed
<?!= include('redux.js'); ?>
<?!= include('index.js'); ?>
</body>
</html>
redux.js.html
<script type="text/babel">
const initialState = {
result: 1,
lastValues: []
}
const reducer = (state = initialState, action) => {
switch (action.type){
case "ADD":
state = {
...state,
result : state.result + action.payload,
lastValues: [...state.lastValues, action.payload]
}
break;
}
return state;
};
const store = Redux.createStore(reducer);
store.subscribe( () => {
console.log('Store updated!', store.getState());
})
store.dispatch({ type: "ADD", payload: 10 })
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
