I have found Quickstart guide - tried following it, cannot get it to work.
Then I found Creating new Item View which referred to a “Quickstart board view github page” welcome-apps/apps/quickstart-react at master · mondaycom/welcome-apps · GitHub - which I tried following as well, and I cannot get it to work either.
I really hate documentation not working and having to waste time on writing posts like this, but I’ll lay out my steps here - and hopefully someone will tell me what is wrong.
I’m trying this on Ubuntu 20.04, I have installed node
via:
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash -
sudo apt install nodejs
First I clone the welcome-apps repo:
git clone https://github.com/mondaycom/welcome-apps.git mondaycom_welcome-apps_git
cd mondaycom_welcome-apps_git/
cd apps/quickstart-react
And then I follow welcome-apps/apps/quickstart-react at master · mondaycom/welcome-apps · GitHub :
Run the project
In the project directory, you should run:
npm install
And then to run an application with the monday tunnel, run:
npm start
Find the provided URL in your terminal. This is your public URL, and you can use it to test your application.
Example: https://unsightly-chickaree-35.tunnel.monday.app
Ok, I’m the project directory already, so:
$ npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/toggle@3.2.7
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/toggle@3.2.7
npm WARN node_modules/monday-ui-react-core/node_modules/@react-stately/toggle
npm WARN @react-stately/toggle@"3.2.7" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/toggle@3.2.7
npm WARN node_modules/monday-ui-react-core/node_modules/@react-stately/toggle
npm WARN @react-stately/toggle@"3.2.7" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-inlinesvg@2.3.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0" from react-inlinesvg@2.3.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-inlinesvg
npm WARN react-inlinesvg@"^2.3.0" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.8.0 || ^17.0.0" from react-inlinesvg@2.3.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-inlinesvg
npm WARN react-inlinesvg@"^2.3.0" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-select@3.2.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0" from react-select@3.2.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select
npm WARN react-select@"^3.2.0" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.8.0 || ^17.0.0" from react-select@3.2.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select
npm WARN react-select@"^3.2.0" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-select@3.2.0
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN dev react-dom@"^18.2.0" from the root project
npm WARN 4 more (monday-ui-react-core, react-popper, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from react-select@3.2.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select
npm WARN react-select@"^3.2.0" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from react-select@3.2.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select
npm WARN react-select@"^3.2.0" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-virtualized-auto-sizer@1.0.6
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^15.3.0 || ^16.0.0-alpha || ^17.0.0" from react-virtualized-auto-sizer@1.0.6
npm WARN node_modules/monday-ui-react-core/node_modules/react-virtualized-auto-sizer
npm WARN react-virtualized-auto-sizer@"^1.0.6" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^15.3.0 || ^16.0.0-alpha || ^17.0.0" from react-virtualized-auto-sizer@1.0.6
npm WARN node_modules/monday-ui-react-core/node_modules/react-virtualized-auto-sizer
npm WARN react-virtualized-auto-sizer@"^1.0.6" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-virtualized-auto-sizer@1.0.6
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN dev react-dom@"^18.2.0" from the root project
npm WARN 4 more (monday-ui-react-core, react-popper, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^15.3.0 || ^16.0.0-alpha || ^17.0.0" from react-virtualized-auto-sizer@1.0.6
npm WARN node_modules/monday-ui-react-core/node_modules/react-virtualized-auto-sizer
npm WARN react-virtualized-auto-sizer@"^1.0.6" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^15.3.0 || ^16.0.0-alpha || ^17.0.0" from react-virtualized-auto-sizer@1.0.6
npm WARN node_modules/monday-ui-react-core/node_modules/react-virtualized-auto-sizer
npm WARN react-virtualized-auto-sizer@"^1.0.6" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-windowed-select@2.0.5
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN react-windowed-select@"^2.0.4" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@"^16.8.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN react-windowed-select@"^2.0.4" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-windowed-select@2.0.5
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN dev react-dom@"^18.2.0" from the root project
npm WARN 4 more (monday-ui-react-core, react-popper, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN react-windowed-select@"^2.0.4" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.8.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN react-windowed-select@"^2.0.4" from monday-ui-react-core@1.54.0
npm WARN node_modules/monday-ui-react-core
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-input-autosize@3.0.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.3.0 || ^17.0.0" from react-input-autosize@3.0.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select/node_modules/react-input-autosize
npm WARN react-input-autosize@"^3.0.0" from react-select@3.2.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.3.0 || ^17.0.0" from react-input-autosize@3.0.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select/node_modules/react-input-autosize
npm WARN react-input-autosize@"^3.0.0" from react-select@3.2.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-select
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-select@3.1.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from react-select@3.1.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select
npm WARN react-select@"3.1.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@"^16.8.0" from react-select@3.1.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select
npm WARN react-select@"3.1.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-select@3.1.0
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN dev react-dom@"^18.2.0" from the root project
npm WARN 4 more (monday-ui-react-core, react-popper, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0" from react-select@3.1.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select
npm WARN react-select@"3.1.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.8.0" from react-select@3.1.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select
npm WARN react-select@"3.1.0" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-window@1.8.5
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^15.0.0 || ^16.0.0" from react-window@1.8.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-window
npm WARN react-window@"1.8.5" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@"^15.0.0 || ^16.0.0" from react-window@1.8.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-window
npm WARN react-window@"1.8.5" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-window@1.8.5
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN dev react-dom@"^18.2.0" from the root project
npm WARN 4 more (monday-ui-react-core, react-popper, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^15.0.0 || ^16.0.0" from react-window@1.8.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-window
npm WARN react-window@"1.8.5" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^15.0.0 || ^16.0.0" from react-window@1.8.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-window
npm WARN react-window@"1.8.5" from react-windowed-select@2.0.5
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-input-autosize@2.2.2
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN dev react@"^18.2.0" from the root project
npm WARN 13 more (@emotion/core, @react-hook/merged-ref, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from react-input-autosize@2.2.2
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select/node_modules/react-input-autosize
npm WARN react-input-autosize@"^2.2.2" from react-select@3.1.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from react-input-autosize@2.2.2
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select/node_modules/react-input-autosize
npm WARN react-input-autosize@"^2.2.2" from react-select@3.1.0
npm WARN node_modules/monday-ui-react-core/node_modules/react-windowed-select/node_modules/react-select
npm WARN deprecated @types/source-map@0.5.7: This is a stub types definition for source-map (https://github.com/mozilla/source-map). source-map provides its own type definitions, so you don't need @types/source-map installed!
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
added 1560 packages, and audited 1561 packages in 37s
221 packages are looking for funding
run `npm fund` for details
7 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Plenty of warnings there, but apparently it “installed”; so next is:
$ npm start
> monday-react-quickstart-app@0.0.1 start
> npm run stop && concurrently "npm run server" "npm run expose"
> monday-react-quickstart-app@0.0.1 stop
> kill-port 8301 && kill-port 4049 && kill-port 4040
0 process was killed
0 process was killed
0 process was killed
[0]
[0] > monday-react-quickstart-app@0.0.1 server
[0] > react-scripts start
[0]
[1]
[1] > monday-react-quickstart-app@0.0.1 expose
[1] > mtunnel -p 8301
[1]
[1] [08:56:04.566] INFO: your url is: https://plump-antelope-27.tunnel.monday.app
[0] Browserslist: caniuse-lite is outdated. Please run:
[0] npx update-browserslist-db@latest
[0] Why you should do it regularly: https://github.com/browserslist/update-db#readme
[0] (node:18627) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] (node:18627) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] Starting the development server...
[0]
[0] Compiled successfully!
[0]
[0] You can now view monday-react-quickstart-app in the browser.
[0]
[0] Local: http://localhost:8301
[0] On Your Network: http://192.168.2.200:8301
[0]
[0] Note that the development build is not optimized.
[0] To create a production build, use npm run build.
[0]
[0] webpack compiled successfully
Again, some warnings there, but the process blocks at end, and seemingly it runs - http://localhost:8301 does show:
Hello Monday Apps!
Hello, your user_id is: still loading. Let’s start building your amazing app, which will change the world!
So, I guess, something here works.
Let’s go further along the README in welcome-apps/apps/quickstart-react at master · mondaycom/welcome-apps · GitHub :
Configure Monday App
- Open monday.com, login to your account and go to a “Developers” section.
- Create a new “QuickStart View Example App”
I guess they should have wrote “click Create App” first:
Then, in the next screen, I can set the name to “QuickStart View Example App”:
… and click on “Save App”
- Open “OAuth & Permissions” section and add “boards:read” scope
Well, it’s not called “OAuth & Permissions” anymore, apparently - and they forgot to say “Save Feature” again, but OK - what are online apps for, but to make life harder?
- Open “Features” section and create a new “Boards View” feature
More accurately - click the “+” by the Features section:
… and on the following New Features screen, select the “Board Views” Feature Type:
… and click “Let’s Go”.
However, what they also forgot here, is that there is there are more steps here - next is choosing the template; I guess “Quickstart - ReactJS” is the right one?
Make the selection, click Next, and you get to the final screen “Set up your dev environment”:
Here I’m told to run npx ...
command, but I’ve already started a local server with npm ...
previously, so at first I tried ignoring this page, and closing the “wizard” via the upper right x
. However, this results with the Feature not being created - and thus no “view setup” tab as in the next step of the tutorial; so:
As one can see from the npm logs above, the URL I got here was https://plump-antelope-27.tunnel.monday.app
; so I’m trying to enter that as “Paste the URL from the previous step”:
… and I click on “Go To Editor” here.
- Open “View setup” tab and fulfill in “Custom URL” field your monday tunnel public URL, which you got previously (example: https://unsightly-chickaree-35.tunnel.monday.app)
Well, entering the URL is now done in the previous step, - but the “View Setup” opens next automatically anyways:
… so we can confirm we have the right URL address.
- Click “Boards” button and choose one of the boards with some data in it.
Ok:
… and click “Save” at end of it.
- Click “Preview button”
I click “Go to preview” button next, and I get a blank screen first:
… and after a few minutes wait, I get:
… an error, " 504 Gateway Time-out — nginx/1.23.1".
This is most definitely not the rendering I expected.
- Enjoy the Quickstart View Example app!
Eh, … I wish
So, why can’t I get the Quickstart tutorial to work?