microsoft-graph-toolkit
microsoft-graph-toolkit copied to clipboard
microsoftgraph
Update contributor guide
Proposal: Update contributor guide
Description
General instructions on project setup and how to get started with mgt repo
Coding guidance should exist in the wiki section for the purpose of documenting how to contribute to the Microsoft Graph Toolkit repo. Ex inlcude:
- [x] How to setup the development environment
- [x] How to build the project
- [x] How to build components
- [x] How to write stories
- [x] How to write documentation
- [x] How to test components in storybook
- [x] Creating a PR
Rationale
MGT team needs more community contributors. By setting up a contributor guide, we are providing documentations on how a new developer can get started with the repo.
Additional Context
In accommodation to launch MGT Code Contribution Challenge
Hello beth-panx, thank you for opening an issue with us!
I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌
![msftbot[bot] avatar](https://avatars.githubusercontent.com/in/26612?v=4 "Published by a pub.dev verified publisher"){kind=small}
Internal feedback that should be addressed by this issue
-
After running yarn start as described in the contrib guide, I'm seeing this in the browser:
Right now I have no idea what I should do next or where this file is located in the project and what I should adjust to see my component or my changes. Do I need to sign in with my MS account? It would be helpful if the contrib guide had some more explanation around this
-
After signing in, I'm being prompted to consent "Nikola amazing AAD app"
Perhaps we could use a different app (or rename this one) like "Microsoft Graph Toolkit testing" to make it more generic and clearer describe its purpose to new contributors (smile)
-
Because the page contains multiple components, I'm asked for a consent 5 times, each time with a different set of permissions. If this page is meant to have all components on it, we should consider to include all scopes at once and show a single prompt. Otherwise developers might get a wrong impression that this is how your app will work if you use MGT, which isn't necessarily the case.
-
Despite having consented all requests for the whole org, I'm seeing the following error in the console:
/cc @waldekmastykarz
After being pointed to this by @nmetulev (thank you for that!) here a few things I noticed while setting up:
- You will need Node v14; v15 does not work as some dependencies seem to need v14
- Python is needed and it seems that version 2.* is required (not sure if that is still the case)
Regarding the contribution guidelines, I would love to have more information on testing changes (manually and automatically) and the user story @nmetulev described above because it quite confusing to me the first time. Maybe it would be better to have something more similar to the XAML Controls Gallery as test page with labels for the individual controls. The WinUI test app has a dedicated page for every controls, in this case it might be a bit overkill, thought the WCT uses a similar testing experience.
I'm surprised about the need for Python, were you getting errors without python?
For a test page, we currently use storybook, you can run the same storybook that is on mgt.dev locally to test changes and validate your changes - we need to add this as a topic for contributors as well
I'm surprised about the need for Python, were you getting errors without python?
I think one of the dependencies uses it to compile itsself. I'll try to uninstall python and see if things still work or not.
For a test page, we currently use storybook, you can run the same storybook that is on mgt.dev locally to test changes and validate your changes - we need to add this as a topic for contributors as well
Ah I see, didn't know about that. Adding that to the contributor documentation would be awesome!
Yes, indeed you need Python 2.7 (on Windows) it seems:
However this only happened when I installed Node.JS version 15, building with version 14.x worked fine though it might just be that the packages were able to pickup python from a different collection then (given that I already have installed VS with python and that also gets used for node). After installing Python 2.7 with Node 15.x I got the following error:
D:\Projects\microsoft-graph-toolkit\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: D:\Projects\microsoft-graph-toolkit\node_modules\node-sass
Output:
Building: C:\Program Files\nodejs\node.exe D:\Projects\microsoft-graph-toolkit\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli 'D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed at getNotFoundError (D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:13:12)
gyp verb `which` failed at F (D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:68:19)
gyp verb `which` failed at E (D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:80:29)
gyp verb `which` failed at D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:89:16
gyp verb `which` failed at D:\Projects\microsoft-graph-toolkit\node_modules\isexe\index.js:42:5
gyp verb `which` failed at D:\Projects\microsoft-graph-toolkit\node_modules\isexe\windows.js:36:5
gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:196:21)
gyp verb `which` failed python2 Error: not found: python2
gyp verb `which` failed at getNotFoundError (D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:13:12)
gyp verb `which` failed at F (D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:68:19)
gyp verb `which` failed at E (D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:80:29)
gyp verb `which` failed at D:\Projects\microsoft-graph-toolkit\node_modules\which\which.js:89:16
gyp verb `which` failed at D:\Projects\microsoft-graph-toolkit\node_modules\isexe\index.js:42:5
gyp verb `which` failed at D:\Projects\microsoft-graph-toolkit\node_modules\isexe\windows.js:36:5
gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:196:21) {
gyp verb `which` failed code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Program Files\Python27\python.EXE
gyp verb check python version `C:\Program Files\Python27\python.EXE -c "import sys; print "2.7.18
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 15.8.0
gyp verb command install [ '15.8.0' ]
gyp verb install input version string "15.8.0"
gyp verb install installing version: 15.8.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version not already installed, continuing with install 15.8.0
gyp verb ensuring nodedir is created C:\Users\Marcel\.node-gyp\15.8.0
gyp verb created nodedir C:\Users\Marcel\.node-gyp\15.8.0
gyp http GET https://nodejs.org/download/release/v15.8.0/node-v15.8.0-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v15.8.0/node-v15.8.0-headers.tar.gz
[...]
gyp verb checksum data {"node-v15.8.0-aix-ppc64.tar.gz":"8a1f2fc0e4aac595f7d82ab9e1a51958aa74bbdfa9bb36090f4a78b5cc776638","node-v15.8.0-darwin-x64.tar.gz":"23f9a8a53d0d63e1d90afe775891088533fc5b277ef83db0cd2fc37951c09595","node-v15.8.0-darwin-x64.tar.xz":"8b1012b7c78c27513bf1d3b1db65f505041771683d964f14f67fe1fc243fe038","node-v15.8.0-headers.tar.gz":"1b86dd704a756ad947d9949fb003bd18483fa9934d910d54fb3c975cb995d2c8","node-v15.8.0-headers.tar.xz":"dea9fe1e00f2516f01533ee52ac853d91a887d5eadab5103a693805fabaf281b","node-v15.8.0-linux-arm64.tar.gz":"086149a16cf7a092f1e12fa2a91bb6587ce25914bd52c3bcff78b5b5c6222e30","node-v15.8.0-linux-arm64.tar.xz":"792403c345a0af5af3641e193cb1e6c6d819315bfe181a147215f7d39e98729f","node-v15.8.0-linux-armv7l.tar.gz":"a6f91fd3f668e7d0f987c8ef17223720bf8f19827cf4ce1b5ba65a076eedcabc","node-v15.8.0-linux-armv7l.tar.xz":"1b9ee1b6ea540873887636753408927f7b5af05c0d4cdaebf3f457fb787e0e4a","node-v15.8.0-linux-ppc64le.tar.gz":"52e9bcee4b6432fdb4d3fa770029e9484ceebd168497e22774e374181af37767","node-v15.8.0-linux-ppc64le.tar.xz":"988fe0b28ae84b7b6cff906ddac1830595b4614b561740f64dce7cb1de610376","node-v15.8.0-linux-s390x.tar.gz":"c1cbf037ca1417131dfbdbbf4ddcc29fe46d0348accceafb65747a30b56f3811","node-v15.8.0-linux-s390x.tar.xz":"a8732e3a7c51064cdb12caeef9b003741a9cc3a789cf756ee2cd12564353a3b2","node-v15.8.0-linux-x64.tar.gz":"c2b073c4421e62aa71f0cef929e61a3334853ab211119f8ea7601612c43cd71d","node-v15.8.0-linux-x64.tar.xz":"cdb80f0810e5a076eb6079297073147d2564b1c2292bb4436b3f9e9e4fe18759","node-v15.8.0.pkg":"a0e5eea1a606a1be5509a3c49e46ff7b3a89d7e843e9a629e3f2cb3cecf921ca","node-v15.8.0.tar.gz":"e08c8778a6b767cd0d2ab4613946d1616c3d4054dead08b04f705d607c84510f","node-v15.8.0.tar.xz":"e23ae2f6181444066cf74e03c3e30e650fbc63764c2b89829928cddf3e4230a9","node-v15.8.0-win-x64.7z":"8cfe90e8a97d9973495498aa5b1a021e901f5859a26440193c3bb9c88cbdbc62","node-v15.8.0-win-x64.zip":"edb16def1fecaecaffcccf9352e9f94a029d47203f26ae44dc1d4aa7eef35940","node-v15.8.0-win-x86.7z":"53a9964d5637546470d0d343aef2c677615d47a1d96f9c818ff6afe4d04acd5a","node-v15.8.0-win-x86.zip":"f339f68c9b21dbaffb9d369c1c2f1d516a7fc25189dad98ae903b09034d97456","node-v15.8.0-x64.msi":"8bbf0c74bc85e5f8f4360ba600a039fb2750a32a4603a389fd072e1ec639ac19","node-v15.8.0-x86.msi":"c02085195b8f0af2d076fa0be68138fddbe939d6dd6bda6dafc122329653a032","win-x64/node.exe":"22e4bcf147f6424a06472a6a6b94def200c455d753bed80dbb9535db1da92ee7","win-x64/node.lib":"74c5baf6049f2f9f6712ad06cbf544c25803f7a01c6f63b8fe18488a68ef4720","win-x64/node_pdb.7z":"eb3e4f8e71b93e2ec3aa328f223a859ef522ecd76d1ebe7df4020c0a0fdf2eb4","win-x64/node_pdb.zip":"e4d2eee8983e58aabe6330df4a6052b2da065a2ede3aa01d29ee052a1fe2abd5","win-x86/node.exe":"b0838991576c255285150d9b93f0ce70fa2a2b775a14ed2de1b6113a0f38e1c4","win-x86/node.lib":"bff86968328f105b6d4a491806863ef9f2b51dc55f02580600c0b2ca5faef870","win-x86/node_pdb.7z":"c796d8d1e1a84e59af9d310555ddde45c7d05acf6f2058fd959434b80da4f221","win-x86/node_pdb.zip":"5735cd9b2136ffbf4f366f0d3fe982f4ac81e7b7ace7c7a8a3d60cab592a0035"}
gyp http 200 https://nodejs.org/download/release/v15.8.0/win-x64/node.lib
gyp verb content checksum win-x86/node.lib bff86968328f105b6d4a491806863ef9f2b51dc55f02580600c0b2ca5faef870
gyp verb content checksum win-x64/node.lib 74c5baf6049f2f9f6712ad06cbf544c25803f7a01c6f63b8fe18488a68ef4720
gyp verb download contents checksum {"node-v15.8.0-headers.tar.gz":"1b86dd704a756ad947d9949fb003bd18483fa9934d910d54fb3c975cb995d2c8","win-x86/node.lib":"bff86968328f105b6d4a491806863ef9f2b51dc55f02580600c0b2ca5faef870","win-x64/node.lib":"74c5baf6049f2f9f6712ad06cbf544c25803f7a01c6f63b8fe18488a68ef4720"}
gyp verb validating download checksum for node-v15.8.0-headers.tar.gz (1b86dd704a756ad947d9949fb003bd18483fa9934d910d54fb3c975cb995d2c8 == 1b86dd704a756ad947d9949fb003bd18483fa9934d910d54fb3c975cb995d2c8)
gyp verb validating download checksum for win-x86/node.lib (bff86968328f105b6d4a491806863ef9f2b51dc55f02580600c0b2ca5faef870 == bff86968328f105b6d4a491806863ef9f2b51dc55f02580600c0b2ca5faef870)
gyp verb validating download checksum for win-x64/node.lib (74c5baf6049f2f9f6712ad06cbf544c25803f7a01c6f63b8fe18488a68ef4720 == 74c5baf6049f2f9f6712ad06cbf544c25803f7a01c6f63b8fe18488a68ef4720)
gyp verb get node dir target node version installed: 15.8.0
gyp verb build dir attempting to create "build" dir: D:\Projects\microsoft-graph-toolkit\node_modules\node-sass\build
gyp verb build dir "build" dir needed to be created? D:\Projects\microsoft-graph-toolkit\node_modules\node-sass\build
gyp verb find vs2017 Found installation at: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
gyp verb find vs2017 - Found Microsoft.VisualStudio.Component.Windows10SDK.17763
gyp verb find vs2017 - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64
gyp verb find vs2017 - Found Microsoft.VisualStudio.VC.MSBuild.Base
gyp verb find vs2017 - Found Microsoft.VisualStudio.Component.Windows10SDK.19041
gyp verb find vs2017 - Found Microsoft.VisualStudio.Component.Windows10SDK.18362
gyp verb find vs2017 - Using this installation with Windows 10 SDK
gyp verb find vs2017 using installation: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: D:\Projects\microsoft-graph-toolkit\node_modules\node-sass\build\config.gypi
gyp verb config.gypi checking for gypi file: D:\Projects\microsoft-graph-toolkit\node_modules\node-sass\config.gypi
gyp verb common.gypi checking for gypi file: D:\Projects\microsoft-graph-toolkit\node_modules\node-sass\common.gypi
gyp verb gyp gyp format was not specified; forcing "msvs"
gyp info spawn C:\Program Files\Python27\python.EXE
gyp info spawn args [
gyp info spawn args 'D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-gyp\\gyp\\gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'msvs',
gyp info spawn args '-G',
gyp info spawn args 'msvs_version=2015',
gyp info spawn args '-I',
gyp info spawn args 'D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-sass\\build\\config.gypi',
gyp info spawn args '-I',
gyp info spawn args 'D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-gyp\\addon.gypi',
gyp info spawn args '-I',
gyp info spawn args 'C:\\Users\\Marcel\\.node-gyp\\15.8.0\\include\\node\\common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=C:\\Users\\Marcel\\.node-gyp\\15.8.0',
gyp info spawn args '-Dnode_gyp_dir=D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-gyp',
gyp info spawn args '-Dnode_lib_file=C:\\Users\\Marcel\\.node-gyp\\15.8.0\\<(target_arch)\\node.lib',
gyp info spawn args '-Dmodule_root_dir=D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-sass',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-sass\\build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
gyp verb command build []
gyp verb build type Release
gyp verb architecture x64
gyp verb node dev dir C:\Users\Marcel\.node-gyp\15.8.0
gyp verb found first Solution file build/binding.sln
gyp verb using MSBuild: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe
gyp info spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe
gyp info spawn args [
gyp info spawn args 'build/binding.sln',
gyp info spawn args '/nologo',
gyp info spawn args '/p:Configuration=Release;Platform=x64'
gyp info spawn args ]
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe ENOENT
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
gyp ERR! stack at onErrorNT (node:internal/child_process:480:16)
gyp ERR! stack at processTicksAndRejections (node:internal/process/task_queues:81:21)
gyp ERR! System Windows_NT 10.0.19042
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Projects\\microsoft-graph-toolkit\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\Projects\microsoft-graph-toolkit\node_modules\node-sass
gyp ERR! node -v v15.8.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! This is a bug in `node-gyp`.
So in conclusion it seems that python is probably needed, though I think any version works fine with Node.JS 14.
I've updated the contributor guide with the current list of proposed topics. I'm sure there is much more that can be added, so I'll keep this issue open for any suggestions and feedback