Error When Loading Page in Local Development - "Cannot GET /"
amadeuscode10 opened this issue · comments
Hello,
Thank you for this project. It's exactly what I'm looking for. I was able to install everything and I can deploy to the spreadsheet directly with no problem. However, I am having issues with local development part of it.
I was able to install the certificates and I get no errors running npm start . When I access https://localhost:3000/ , the page is loaded with the following message: Cannot GET /
I have checked the console log in the browser and the following messages are outputted :
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). [prepareInjection.js:249:78](moz-extension://ee0dd021-f8b2-4b23-95a4-a249a354eb66/build/prepareInjection.js)
Content Security Policy: The page’s settings blocked the loading of a resource at https://localhost:3000/favicon.ico (“default-src”). ``` [FaviconLoader.jsm:180:19](resource:///modules/FaviconLoader.jsm)
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
I have made no modifications to the project and I am running it as is from the template.
I have attempted to access the site from Firefox and Chrome. I have disabled any add on and removed any enhanced securities (site protection, ad blocker ect) from the browsers. I am running on Linux (Pop Os!).
Any suggestions on how to approach the problem?
What happens when you try to open the add on from the spreadsheet after running npm start?
The add on works perfectly fine in the spreadsheet directly after running npm start. I can make changes and deploy them, and they will be reflected on the spreadsheet.
However, running npm start and going to https://localhost:3000/
I see the following
Here's the output of npm start
> react-google-apps-script@2.1.1 start
> npm run deploy:dev && npm run serve
> react-google-apps-script@2.1.1 deploy:dev
> rimraf dist && npm run build:dev && npx clasp push
> react-google-apps-script@2.1.1 build:dev
> cross-env NODE_ENV=development webpack
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
COPY FILES - appsscript.json:
asset appsscript.json 256 bytes [emitted] [from: appsscript.json] [copied]
asset main.js 182 bytes [emitted] [minimized] (name: main)
./appsscript.json 231 bytes [built] [code generated]
COPY FILES - appsscript.json (webpack 5.73.0) compiled successfully in 2464 ms
SERVER:
asset code.js 6.38 KiB [emitted] [minimized] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 3.23 KiB
./src/server/index.ts 816 bytes [built] [code generated]
./src/server/ui.js 1.49 KiB [built] [code generated]
./src/server/sheets.js 972 bytes [built] [code generated]
SERVER (webpack 5.73.0) compiled successfully in 10376 ms
CLIENT - Dialog Demo:
asset dialog-demo-impl.html 1.64 MiB [emitted]
asset main.js 1.64 MiB [emitted] (name: main)
198 modules
CLIENT - Dialog Demo (webpack 5.73.0) compiled successfully in 30771 ms
CLIENT - Dialog Demo Bootstrap:
asset dialog-demo-bootstrap-impl.html 2.45 MiB [emitted]
asset main.js 2.45 MiB [emitted] (name: main)
runtime modules 3.23 KiB 8 modules
orphan modules 11.9 KiB [orphan] 5 modules
modules by path ./node_modules/ 1.8 MiB 445 modules
modules by path ./src/client/ 12.4 KiB
modules by path ./src/client/dialog-demo-bootstrap/components/ 7.43 KiB
./src/client/dialog-demo-bootstrap/components/SheetEditor.jsx 3.67 KiB [built] [code generated]
./src/client/dialog-demo-bootstrap/components/FormInput.tsx 3.76 KiB [built] [code generated]
modules by path ./src/client/dialog-demo-bootstrap/*.css 2.3 KiB
./src/client/dialog-demo-bootstrap/styles.css 1.26 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/client/dialog-demo-bootstrap/styles.css 1.04 KiB [built] [code generated]
./src/client/dialog-demo-bootstrap/index.js 1.29 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 1.41 KiB [built] [code generated]
external "PropTypes" 42 bytes [built] [code generated]
external "GASClient" 42 bytes [built] [code generated]
external "reactLifecyclesCompat" 42 bytes [built] [code generated]
CLIENT - Dialog Demo Bootstrap (webpack 5.73.0) compiled successfully in 31932 ms
CLIENT - Dialog Demo MUI:
asset dialog-demo-mui-impl.html 4.82 MiB [emitted]
asset main.js 4.82 MiB [emitted] (name: main)
1088 modules
CLIENT - Dialog Demo MUI (webpack 5.73.0) compiled successfully in 32528 ms
CLIENT - Dialog Demo Tailwind CSS:
asset dialog-demo-tailwindcss-impl.html 1.65 MiB [emitted]
asset main.js 1.65 MiB [emitted] (name: main)
197 modules
CLIENT - Dialog Demo Tailwind CSS (webpack 5.73.0) compiled successfully in 29254 ms
CLIENT - Sidebar About Page:
asset sidebar-about-page-impl.html 1.53 MiB [emitted]
asset main.js 1.53 MiB [emitted] (name: main)
runtime modules 3.19 KiB 7 modules
modules by path ./node_modules/core-js-pure/ 120 KiB 115 modules
modules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 52.7 KiB 23 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
modules by path ./src/client/sidebar-about-page/ 3.04 KiB 2 modules
modules by path ./node_modules/react-refresh/ 20.2 KiB 2 modules
modules by path ./node_modules/react/ 85.7 KiB 2 modules
modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
+ 3 modules
CLIENT - Sidebar About Page (webpack 5.73.0) compiled successfully in 30807 ms
DEVELOPMENT: CLIENT - Dialog Demo:
asset dialog-demo.html 25.1 KiB [emitted]
asset main.js 24.5 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
built modules 18.4 KiB [built]
cacheable modules 18.3 KiB
modules by path ./node_modules/ 16.3 KiB
./node_modules/react-dom/client.js 619 bytes [built] [code generated]
./node_modules/gas-client/dist/index.js 15.7 KiB [built] [code generated]
./dev/index.js 1.57 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 430 bytes [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
DEVELOPMENT: CLIENT - Dialog Demo (webpack 5.73.0) compiled successfully in 24803 ms
DEVELOPMENT: CLIENT - Dialog Demo Bootstrap:
asset dialog-demo-bootstrap.html 25.1 KiB [emitted]
asset main.js 24.5 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
built modules 18.4 KiB [built]
cacheable modules 18.3 KiB
modules by path ./node_modules/ 16.3 KiB
./node_modules/react-dom/client.js 619 bytes [built] [code generated]
./node_modules/gas-client/dist/index.js 15.7 KiB [built] [code generated]
./dev/index.js 1.57 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 430 bytes [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
DEVELOPMENT: CLIENT - Dialog Demo Bootstrap (webpack 5.73.0) compiled successfully in 24801 ms
DEVELOPMENT: CLIENT - Dialog Demo MUI:
asset dialog-demo-mui.html 25.1 KiB [emitted]
asset main.js 24.5 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
built modules 18.4 KiB [built]
cacheable modules 18.3 KiB
modules by path ./node_modules/ 16.3 KiB
./node_modules/react-dom/client.js 619 bytes [built] [code generated]
./node_modules/gas-client/dist/index.js 15.7 KiB [built] [code generated]
./dev/index.js 1.57 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 430 bytes [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
DEVELOPMENT: CLIENT - Dialog Demo MUI (webpack 5.73.0) compiled successfully in 24798 ms
DEVELOPMENT: CLIENT - Dialog Demo Tailwind CSS:
asset dialog-demo-tailwindcss.html 25.1 KiB [emitted]
asset main.js 24.5 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
built modules 18.4 KiB [built]
cacheable modules 18.3 KiB
modules by path ./node_modules/ 16.3 KiB
./node_modules/react-dom/client.js 619 bytes [built] [code generated]
./node_modules/gas-client/dist/index.js 15.7 KiB [built] [code generated]
./dev/index.js 1.57 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 430 bytes [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
DEVELOPMENT: CLIENT - Dialog Demo Tailwind CSS (webpack 5.73.0) compiled successfully in 24796 ms
DEVELOPMENT: CLIENT - Sidebar About Page:
asset sidebar-about-page.html 25.1 KiB [emitted]
asset main.js 24.5 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
built modules 18.4 KiB [built]
cacheable modules 18.3 KiB
modules by path ./node_modules/ 16.3 KiB
./node_modules/react-dom/client.js 619 bytes [built] [code generated]
./node_modules/gas-client/dist/index.js 15.7 KiB [built] [code generated]
./dev/index.js 1.57 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 430 bytes [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
DEVELOPMENT: CLIENT - Sidebar About Page (webpack 5.73.0) compiled successfully in 24798 ms
└─ dist/appsscript.json
└─ dist/code.js
└─ dist/dialog-demo-bootstrap.html
└─ dist/dialog-demo-mui.html
└─ dist/dialog-demo-tailwindcss.html
└─ dist/dialog-demo.html
└─ dist/sidebar-about-page.html
Pushed 7 files.
> react-google-apps-script@2.1.1 serve
> cross-env NODE_ENV=development webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): https://192.168.1.11:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/home/albertoaguilera/IdeaProjects/React-Google-Apps-Script/public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
COPY FILES - appsscript.json:
asset main.js 114 KiB [emitted] [minimized] (name: main) 1 related asset
asset appsscript.json 256 bytes [emitted] [from: appsscript.json] [copied]
runtime modules 26.3 KiB 11 modules
orphan modules 18.8 KiB [orphan] 8 modules
cacheable modules 158 KiB
modules by path ./node_modules/webpack/ 18.8 KiB
./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated]
+ 4 modules
modules by path ./node_modules/webpack-dev-server/client/ 53.5 KiB
./node_modules/webpack-dev-server/client/index.js?protocol=wss%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=info&reconnect=10 + 8 modules 25.7 KiB [built] [code generated]
+ 3 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
+ 2 modules
./appsscript.json 231 bytes [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
COPY FILES - appsscript.json (webpack 5.73.0) compiled successfully in 9534 ms
CLIENT - Dialog Demo:
asset dialog-demo-impl.html 1.77 MiB [emitted]
asset main.js 1.77 MiB [emitted] (name: main)
runtime modules 28.6 KiB 15 modules
orphan modules 11.6 KiB [orphan] 3 modules
modules by path ./node_modules/ 1.49 MiB 195 modules
modules by path ./src/client/ 15.4 KiB
modules by path ./src/client/dialog-demo/components/*.jsx 7.36 KiB
./src/client/dialog-demo/components/SheetEditor.jsx 3.26 KiB [built] [code generated]
./src/client/dialog-demo/components/FormInput.jsx 2.16 KiB [built] [code generated]
./src/client/dialog-demo/components/SheetButton.jsx 1.94 KiB [built] [code generated]
modules by path ./src/client/dialog-demo/*.css 5.32 KiB
./src/client/dialog-demo/styles.css 2.44 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/client/dialog-demo/styles.css 2.88 KiB [built] [code generated]
./src/client/dialog-demo/index.js 1.29 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 1.41 KiB [built] [code generated]
external "PropTypes" 42 bytes [built] [code generated]
external "GASClient" 42 bytes [built] [code generated]
CLIENT - Dialog Demo (webpack 5.73.0) compiled successfully in 15847 ms
CLIENT - Dialog Demo Bootstrap:
asset dialog-demo-bootstrap-impl.html 2.58 MiB [emitted]
asset main.js 2.58 MiB [emitted] (name: main)
runtime modules 28.6 KiB 15 modules
orphan modules 11.9 KiB [orphan] 5 modules
modules by path ./node_modules/ 1.88 MiB 462 modules
modules by path ./src/client/ 13.6 KiB
modules by path ./src/client/dialog-demo-bootstrap/components/ 7.43 KiB
./src/client/dialog-demo-bootstrap/components/SheetEditor.jsx 3.67 KiB [built] [code generated]
./src/client/dialog-demo-bootstrap/components/FormInput.tsx 3.76 KiB [built] [code generated]
modules by path ./src/client/dialog-demo-bootstrap/*.css 3.49 KiB
./src/client/dialog-demo-bootstrap/styles.css 2.44 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/client/dialog-demo-bootstrap/styles.css 1.04 KiB [built] [code generated]
./src/client/dialog-demo-bootstrap/index.js 1.29 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 1.41 KiB [built] [code generated]
external "PropTypes" 42 bytes [built] [code generated]
external "GASClient" 42 bytes [built] [code generated]
external "reactLifecyclesCompat" 42 bytes [built] [code generated]
CLIENT - Dialog Demo Bootstrap (webpack 5.73.0) compiled successfully in 18597 ms
CLIENT - Dialog Demo MUI:
asset dialog-demo-mui-impl.html 4.95 MiB [emitted]
asset main.js 4.95 MiB [emitted] (name: main)
1112 modules
CLIENT - Dialog Demo MUI (webpack 5.73.0) compiled successfully in 19288 ms
CLIENT - Dialog Demo Tailwind CSS:
asset dialog-demo-tailwindcss-impl.html 1.78 MiB [emitted]
asset main.js 1.78 MiB [emitted] (name: main)
runtime modules 28.6 KiB 15 modules
orphan modules 11.6 KiB [orphan] 3 modules
modules by path ./node_modules/ 1.49 MiB 194 modules
modules by path ./src/client/ 30.4 KiB
modules by path ./src/client/dialog-demo-tailwindcss/components/ 9.79 KiB
./src/client/dialog-demo-tailwindcss/components/SheetEditor.jsx 3.26 KiB [built] [code generated]
./src/client/dialog-demo-tailwindcss/components/FormInput.tsx 3.64 KiB [built] [code generated]
./src/client/dialog-demo-tailwindcss/components/SheetButton.jsx 2.88 KiB [built] [code generated]
modules by path ./src/client/dialog-demo-tailwindcss/*.css 17.8 KiB
./src/client/dialog-demo-tailwindcss/styles.css 2.44 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/client/dialog-demo-tailwindcss/styles.css 15.3 KiB [built] [code generated]
./src/client/dialog-demo-tailwindcss/index.js 1.4 KiB [built] [code generated]
./src/client/utils/serverFunctions.ts 1.41 KiB [built] [code generated]
external "PropTypes" 42 bytes [built] [code generated]
external "GASClient" 42 bytes [built] [code generated]
CLIENT - Dialog Demo Tailwind CSS (webpack 5.73.0) compiled successfully in 17347 ms
CLIENT - Sidebar About Page:
asset sidebar-about-page-impl.html 1.66 MiB [emitted]
asset main.js 1.66 MiB [emitted] (name: main)
runtime modules 28.6 KiB 14 modules
modules by path ./node_modules/core-js-pure/ 120 KiB 115 modules
modules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 52.7 KiB 23 modules
modules by path ./node_modules/webpack-dev-server/client/ 53.5 KiB 12 modules
modules by path ./node_modules/webpack/ 18.8 KiB 5 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
modules by path ./src/client/sidebar-about-page/ 3.04 KiB 2 modules
modules by path ./node_modules/react-refresh/ 20.2 KiB 2 modules
modules by path ./node_modules/react/ 85.7 KiB 2 modules
modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
+ 3 modules
CLIENT - Sidebar About Page (webpack 5.73.0) compiled successfully in 17340 ms
So it looks like everything's running correctly. When you run npm start it deploys a shell that runs the react app in development mode, but inside the spreadsheet add on. Try running npm start and then change the MUI file (for example change the text in the header that says "MUI demo!") and save the file. The change should immediately be reflected inside the add on window within the spreadsheet. No need to redeploy.
This project is designed to allow you to run server functions while developing your react app, but you need to run it inside the spreadsheet. If you want to develop inside a separate browser window, i.e. not inside the spreadsheet, you can try opening for example https://localhost:3000/dialog-demo-mui-impl.html. But note the server functions won't work here so you won't see the full app, and it's not really meant to be worked on this way.
Thanks! That worked. I apologize. I seemed to have fundamentally misunderstood the purpose of the localhost and how it worked directly in the add on. This is a great! Thank you for clarification.
Thanks! That worked. I apologize. I seemed to have fundamentally misunderstood the purpose of the localhost and how it worked directly in the add on. This is a great! Thank you for clarification.