clomie/gas-vue-typescript

Template for Google Apps Script macros and its front-end webapp setup with TypeScript, Vue.js, Vuetify.

gas-vue-typescript

This is a template repository for Google Apps Script (GAS) WebApp project.
The main use case for this repository is GAS macros and its execution front-end.

The front-end is preconfigured with:

• TypeScript
• Vue.js
• Vuetify
• Function call from client side
• Google Picker

Project Tree

/gas-vue-typescript
├─ frontend/  # Front-end (Vue.js) project
├─ script/    # GAS script project
└─ types/     # Type definitions that are used across both projects.

Setup

Install Clasp

% npm -g install @google/clasp
% clasp login

Create GAS Project

% clasp create --type webapp --rootDir dist
Created new webapp script: https://script.google.com/d/*****/edit
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 1 file.
└─ dist/appsscript.json

Get API Key for Google Picker

See below link and get your API key.
https://developers.google.com/picker/docs/#appreg

Setup your API key as build environment variables.

% echo 'VUE_APP_PICKER_DEVELOPER_KEY=<Your Developer Key...>' > ./frontend/.env.local

Install Dependencies

% yarn

Build Application

% yarn build

Push Built Files to GAS Project

% clasp push
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ dist/Code.js
└─ dist/appsscript.json
└─ dist/index.html
Pushed 3 files.

Open pushed WebApp

% clasp open --webapp
? Open which deployment?
❯                               @HEAD - AKfycbaaaaaaa...
Opening web application: AKfycbaaaaaaa...

Release WebApp

If the 1st time:

% clasp version "First release"
~ 1 Version ~
1 - First release
% clasp deploy -V 1
- AKfycbbbbbbbb... @1.

2nd and after:

% clasp version "Another release"
Created version 2.
% clasp deployments
2 Deployments.
- AKfycbaaaaaaa... @HEAD
- AKfycbbbbbbbb... @1
% clasp deploy -V 2 -i AKfycbbbbbbbb...
- AKfycbbbbbbbb... @2.

Customize Configuration

See Configuration Reference.

See Also

• Vue CLI https://cli.vuejs.org/guide/
• html-webpack-plugin(v3) https://github.com/jantimon/html-webpack-plugin/tree/v3.2.0
• html-webpack-inline-source-plugin https://github.com/DustinJackson/html-webpack-inline-source-plugin/
• webpack-cdn-plugin https://github.com/van-nguyen/webpack-cdn-plugin
• Google Picker https://developers.google.com/picker/docs/
• Google Apps Script https://developers.google.com/apps-script/overview
• Clasp https://github.com/google/clasp
• Vuetify https://vuetifyjs.com/ja/

gas-vue-typescript's Issues

Multiple packages setup

Would be better to have multiple package setup like yarn workspaces.
https://classic.yarnpkg.com/en/docs/workspaces

Want to do:

• Run npm scripts on both packages (frontend and script) from root directory in a platform-independent way.
• Enable linting and type checking on edit time with VSCode.

Setup CI

To setup Github Actions. It may contains following stuffs.

• lint
• build
• push
• deploy

Configure lint for script folder

To setup ESLint and Prettier to be able to lint script codes.

Any update npm package

I use this repos and very useful. Could you please update newest npm?

When I run it in local. google is not defined

Github Actions: Warning: The `set-env` command is deprecated and will be disabled soon.

https://github.com/clomie/gas-vue-typescript/actions/runs/293673643

Warning: The set-env command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2020-10-01-github-actions-deprecating-set-env-and-add-path-commands/

html-webpack-inline-source-plugin is no longer maintained

To consider replace with react-dev-utils/InlineChunkHtmlPlugin as html-webpack-inline-source-plugin repository suggested.

https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils

Custom Sidebar with Vue?

Hello, and thank you for this template!
May I ask whether the template can be used to make a Custom HTML sidebar in a document-bound Google Scripts?
This is the description of the sidebar from the Google documentation > https://developers.google.com/apps-script/guides/dialogs#custom_sidebars
Thank you,
Guido

Error when building fresh install: types conflict

Hi @clomie, thanks for a great project!

I'm trying to build a fresh install of it, however, I get the following error: Subsequent variable declarations must have the same type. Variable 'console' must be of type 'Console', but here has type 'console'.

If I understand correctly, it's related to this issue, but I couldn't find a correct way to solve it (commenting out the row that causes this error indeed solves the problem, but it doesn't feel like a right way to do it). Do you have any clues to this?

Thanks :)

Upgrade Vuetify to v2

Error when building fresh install

Executing make build fails with the following error:

ERROR in /Users/mateus-wmf/workspace/thesocialdev/mymoney/frontend/node_modules/@types/node/ts3.1/globals.d.ts(573,15):
573:15 Interface 'NodeJS.Module' incorrectly extends interface '__WebpackModuleApi.Module'.
  Types of property 'parent' are incompatible.
    Type 'Module | null | undefined' is not assignable to type 'NodeModule | null'.
      Type 'undefined' is not assignable to type 'NodeModule | null'.
    571 |         '.node': (m: Module, filename: string) => any;
    572 |     }
  > 573 |     interface Module {
        |               ^
    574 |         exports: any;
    575 |         require: Require;
    576 |         id: string;