GAS Web App with React
Tags: javascript, react, google, googleappsscript
Published: 2020-09-10 00:34:08

If you use Google Apps Script to create Web Apps and are thinking about how to use React for it, you have come to the right place!

I'm sharing with you a base project so you can create your GAS Web Apps using the React library on the front-end. I used as a base this project [here](https://github.com/enuchi/React-Google-Apps-Script) that uses React to create Modals in a spreadsheet and I adapted it to use in Web Apps.


## First steps

You can start by cloning the [repository](https://github.com/ehduardu/apps-script-react-base-project) to your local machine and run the command: ```npm install```&nbsp;You'll need to use clasp to deploy after you build the application, know how to use clasp [here](https://github.com/google/clasp).

With npm installed and the clasp configured, copy the script ID of your project into GAS and paste it into the .clasp.json file. 

## Project structure

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oti74scp4k6s85sva8jf.png)

The project structure is basically divided between Client and Server, where one corresponds to the front-end(pages, components...) and the other to the back-end(GAS functions), respectively.

In the server folder, put all your functions that will perform your script actions, I use the Controller folder to better organize my project.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wukmcnibd862hfewxe8v.png)


Then you must map the functions to be called by the front-end in the file **index.js**, using global variables. Below I map the **getScriptToken** function as an example exported from a controller and the **doGet** function, it's as mandatory in Web Apps (this function will call the file **app.html** that will be built at the end). 

![Arquivo index.js](https://dev-to-uploads.s3.amazonaws.com/i/6bu1ztsxdfjgyp6cublq.png)*index.js*

Well, this is the server part of the Web App, but let's now go to the Front-end part which is what interests this post. On the client side, I created the folder **pages** where I save all the pages of my application and the folder **utils** where I save the file **server.js** (which will serve to call the global variables created in the server folder) and any other utility file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rhhco9qy6akmtgpzibrf.png)

The file **index.html** is our Web App frame, it contains a session with "index" id, where we will render our React content.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ai6t46wkg1jgma9do1oj.png)*index.html*

In the file **Router.js** is where we configure our routes, importing the pages and using the elements of the **react-router-dom**, this way we can navigate between pages through history, since the GAS Web Apps have no URL change.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/53g2fso979536eztvm60.png)*Router.js*

And finally in the file **App.jsx** the routes of React are rendered in the html file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8i7iaa23by50ty2zixue.png)*App.jsx*

I created two pages to perform a basic test, the page **Home** and the page **Register**. We can navigate through the pages through a button that calls the "useHistory" element of the **react-router-dom**. On the page **Register** I show you how to call server function **getScriptToken**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sowa5x3q5ow7r012vx43.png)*index.js from Page Home*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xb5dlos4012ynlnrw0t4.png)*index.js from Page Register*

After creating your pages and configuring your routes, run the command below to build and deploy in your GAS project.``` npm run deploy``` 

Now you have a Web App with React support, use your creativity to create multiple pages, components and install libraries like StyledComponents, which I'm even using in the pages, and several others, but this is subject for the next post, thanks!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kzz1vgu5oma63yoon430.gif)