Localhost refused to Connect

[enuchi]

Localhost refused to Connect

[kavuribhavya]

You are right. It was building the development version. The NODE_ENV variable was not getting set correctly. I assigned isProd to be true and the app works in sheets now.

Node Version:
$ node -v v13.5.0

Thank you so much for your prompt help!

[enuchi]

@kavuribhavya Are you trying to run locally? If so follow the instructions for running locally in the readme https://github.com/enuchi/React-Google-Apps-Script#-new-local-development-

If you are just trying to see the built app run npm run deploy to load the production environment.

[kavuribhavya]

I'm trying to see the app run, and did npm run deploy . That is the error i see when i do that.
Steps followed:

git clone https://github.com/enuchi/React-Google-Apps-Script.git
cd React-Google-Apps-Script
npm install
## Added a new script id to .clasp.json
npm run deploy

[enuchi]

It looks like it's running the development mode. Can you paste the scripts from your package file here?

[kavuribhavya]

  "scripts": {
    "test": "test",
    "login": "clasp login",
    "setup": "rm -f .clasp.json & clasp create --type sheets --title 'My React Project' --rootDir ./dist",
    "setup:use-id": "clasp setting rootDir dist & clasp setting scriptId",
    "setup:https": "mkdir certs & mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1",
    "build:dev": "set NODE_ENV=development & webpack",
    "build": "set NODE_ENV=production & webpack",
    "deploy:dev": "rm -rf dist & npm run build:dev & clasp push",
    "deploy": "rm -rf dist & npm run build & clasp push",
    "serve": "webpack-dev-server",
    "start": "npm run deploy:dev & npm run serve"
  },

[enuchi]

Should be double ampersand && to run in sequence. Can you try that?

Also I'll update soon to use cross-env to support all platforms for setting environment variables.

[kavuribhavya]

If I use && or &, I see the below error,

Prompts can not be meaningfully rendered in non-TTY environments npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] deploy: rm -rf dist && npm run build && clasp push`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\pgvq83\AppData\Roaming\npm-cache_logs\2020-09-01T21_24_05_974Z-debug.log

`

I'm running the commands individually in sequence(rm -rf dist,$ export NODE_ENV=production, webpack, clasp push) and they run without errors. Are there any compatibility issues with webpack and windows?

[enuchi]

Not that I'm aware of, although someone else pointed out another windows-related issue once. When you run them individually in sequence does the app work normally in sheets?

[kavuribhavya]

No it doesn't but no errors on the command line. Although I see Entrypoint undefined (example output : Entrypoint main = main.js [0] ./appsscript.json 266 bytes {0} [built] Child SERVER: Hash: 150e0391a8610ca733a2 Time: 17077ms Built at: 09/01/2020 4:26:36 PM Asset Size Chunks Chunk Names code.js 6.68 KiB 0 [emitted] main Entrypoint main = code.js [0] ./src/server/index.js 631 bytes {0} [built] [2] ./src/server/ui.js 1.02 KiB {0} [built] [3] ./src/server/sheets.js 972 bytes {0} [built] + 1 hidden module Child CLIENT - Dialog Demo: Hash: 418ffc6926790822f8a7 Time: 24655ms Built at: 09/01/2020 4:26:44 PM Asset Size Chunks Chunk Names dialog-demo-impl.html 71.3 KiB [emitted] main.js 70.5 KiB main [emitted] main Entrypoint main = main.js [./node_modules/css-loader/dist/cjs.js!./src/client/dialog-demo/styles.css] 2.95 KiB {main} [built] [./src/client/dialog-demo/index.js] 240 bytes {main} [built] [./src/client/dialog-demo/styles.css] 532 bytes {main} [built] [./src/client/utils/server.js] 255 bytes {main} [built] [prop-types] external "PropTypes" 42 bytes {main} [built] [react] external "React" 42 bytes {main} [built] [react-dom] external "ReactDOM" 42 bytes {main} [built] [react-transition-group] external "ReactTransitionGroup" 42 bytes {main} [built] + 17 hidden modules Child html-webpack-plugin for "dialog-demo-impl.html": 1 asset Entrypoint undefined = dialog-demo-impl.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/client/dialog-demo/index.html] 613 bytes {0} [built] + 3 hidden modules)

[enuchi]

Looks like it is still building the development version. Can you print isProd or env.process.NODE_ENV in the webpack file and check that it is picking up the environment variable correctly? Also, what version of node are you running?

React-Google-Apps-Script/webpack.config.js

Line 26 in ad59879

const isProd = process.env.NODE_ENV === 'production';