Please share your feedback on the SPFx Workbench

%3CLINGO-SUB%20id%3D%22lingo-sub-41853%22%20slang%3D%22en-US%22%3EPlease%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-41853%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20everyone!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe're%20beginning%20to%20take%20a%20look%20at%20what%26nbsp%3Bshould%20go%20in%20the%20next%20version%20of%20the%20SPFx%20Workbench.%26nbsp%3B%20If%20you've%20tried%20it%20out%20we'd%20love%20to%20get%20your%20feedback%20on%20what%20features%20would%20make%20it%20more%20useful%20to%20you%20as%20developers.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAre%20there%20things%20it%20could%26nbsp%3Bdo%20that%20would%20make%20you%20more%20productive%3F%26nbsp%3B%20Things%20that%20would%20help%20improve%20the%20quality%20of%20the%20projects%20you're%20building%20with%20SPFx%3F%26nbsp%3B%20All%26nbsp%3Bfeedback%20is%20welcome%20and%20will%20help%20us%20plan%20out%20the%20next%20set%20of%20improvements.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-41853%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-227486%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-227486%22%20slang%3D%22en-US%22%3E%3CP%3EOk%20Im%20an%20idiot%20%3A)I%20just%20switched%20back%20to%20the%20Workbench%20to%20coninue%20development%20and%20noticed%20the%20%22mobile%22%20and%20%22tablet%22%20links%20already%20available%20there%26nbsp%3B%20*duh*%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-227485%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-227485%22%20slang%3D%22en-US%22%3E%3CP%3EOk%20Im%20an%20idiot%20%3A)I%20just%20switched%20back%20to%20the%20Workbench%20to%20coninue%20development%20and%20noticed%20the%20%22mobile%22%20and%20%22tablet%22%20links%20already%20available%20there%26nbsp%3B%20*duh*%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-227484%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-227484%22%20slang%3D%22en-US%22%3E%3CUL%3E%3CLI%3ETo%20have%20a%20full%20modern%20page%20experience%20(with%20the%20possibility%20of%20three%20columns%20etc.)%20instead%20of%20the%20current%20single%20column%20centred%20experience%3C%2FLI%3E%3CLI%3EAble%20to%20see%20how%20the%20content%20looks%20rendered%20in%20mobile%20experience%20%2F%20SharePoint%20App%20(I%20know%20this%20is%20possible%20through%20most%20browser%20dev%20tools%2C%20but%20might%20be%20nice%20to%20do%20it%20directly%20from%20Workbench)%3C%2FLI%3E%3CLI%3EA%20logger%2Fcall%20outs%20that%20captures%20the%20requests%26nbsp%3Band%20responses%20generated%20by%20the%20web%20part%20-%26nbsp%3Bagain%2C%20I%20understand%20that%20this%20is%20available%20in%20most%20browser%20dev%20tools%3C%2FLI%3E%3C%2FUL%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-223375%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-223375%22%20slang%3D%22en-US%22%3E%3CP%3ECan%20you%20change%20the%20default%20port%20from%205432%20please%3F%20That%20is%20the%20standard%20port%20used%20by%20PostgreSQL.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45310%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45310%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3EAllow%20to%20preview%20translated%20web%20part%20metadata%20in%20the%20toolbox%20in%20the%20workbench%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22gh-header-number%22%3E%3CSPAN%3EWhen%20building%20multilingual%20web%20parts%2C%20developers%20should%20be%20able%20to%20verify%20that%20the%20different%20translations%20are%20displayed%20correctly%20in%20the%20web%20part%20toolbox.%20They%20should%20be%20able%20to%20verify%20this%20during%20the%20development%20process%20using%20workbench.%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22gh-header-number%22%3E%3CSPAN%3EAt%20the%20moment%2C%20only%20en-us%20is%20shown.%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22gh-header-number%22%3E%3CSPAN%3EThis%20was%20discovered%20by%20Waldek%20Mastykarz%2C%20i%20only%20repeat%20it%20here%20so%20it%20gets%20the%20attention%20it%20deserves.%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22gh-header-number%22%3E%3CSPAN%3EThis%20is%20described%20in%20more%20detail%20in%20this%20issue%3A%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F329%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F329%3C%2FA%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-42469%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-42469%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Jeremy%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20getting%20back%20to%20me%20on%20this.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20understand%20how%20this%20could%20work.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENigel%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-42463%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-42463%22%20slang%3D%22en-US%22%3E%3CP%3EI%26nbsp%3Btalked%20to%20our%20devs%20and%20actually%20got%20an%20answer%20as%20to%20how%20to%20make%20this%20work%20today.%26nbsp%3B%20If%20you%20look%20in%26nbsp%3Byour%20web%20part%20Config%20folder%20you'll%20see%20a%20file%20named%20serve.json.%26nbsp%3B%20You%20should%20be%20able%20to%20change%20the%20port%20number%20in%20that%20config%20file%20(there%20are%20two%20entries%20in%20the%20file%20that%20use%20the%20number)%20and%20have%20side%20by%20side%20local%20work%20benches%20for%20two%20independent%20projects!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20default%20contents%20looks%20like%20this%3A%3C%2FP%3E%0A%3CPRE%3E%7B%20%20%22port%22%3A%204321%2C%20%20%22initialPage%22%3A%20%22https%3A%2F%2Flocalhost%3A5432%2Fworkbench%22%2C%20%20%22https%22%3A%20true%2C%20%20%22api%22%3A%20%7B%20%20%20%20%22port%22%3A%205432%2C%20%20%20%20%22entryPath%22%3A%20%22node_modules%2F%40microsoft%2Fsp-webpart-workbench%2Flib%2Fapi%2F%22%20%20%7D%7D%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20believe%20you%20want%20to%20change%20the%20initialPage%20and%20port%20inside%20the%20API%20section.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-42435%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-42435%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Jeremy%3C%2FP%3E%3CP%3E%26nbsp%3B%20I%20was%20just%20using%20gulp%20serve%20in%20both%20command%20windows%20with%20different%20webparts.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENigel%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-42425%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-42425%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Nigel!%26nbsp%3B%20Can%20you%20let%20me%20know%20what%20command%20(or%20sequence%20of%20commands)%26nbsp%3Byou're%20executing%20when%20you%20get%20that%20error%3F%26nbsp%3B%20I%26nbsp%3Bdon't%20seem%20to%20have%20trouble%20keeping%20a%20couple%20Node.JS%20windows%20open%20at%20a%20time%20but%20it's%20likely%20just%20that%20I'm%20not%20doing%20exactly%20what%20you%20are.%26nbsp%3B%20Thanks!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E-Jeremy%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-42388%22%20slang%3D%22en-US%22%3ERe%3A%20Please%20share%20your%20feedback%20on%20the%20SPFx%20Workbench%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-42388%22%20slang%3D%22en-US%22%3E%3CP%3EIt%20would%20appear%20that%20you%20can%20only%20have%20one%20Node.js%20command%20prompt%20at%20a%20time%20otherwise%20you%20get%20an%20error%20%3A-%20%5B14%3A00%3A05%5D%20Error%20-%20Unknown%3CBR%20%2F%3E%26nbsp%3Blisten%20EADDRINUSE%20%3A%3A%3A4321%3CBR%20%2F%3E%7B%20%5BError%3A%20listen%20EADDRINUSE%20%3A%3A%3A5432%5D%3CBR%20%2F%3E%26nbsp%3B%20code%3A%20'EADDRINUSE'%2C%3CBR%20%2F%3E%26nbsp%3B%20errno%3A%20'EADDRINUSE'%2C%3CBR%20%2F%3E%26nbsp%3B%20syscall%3A%20'listen'%2C%3CBR%20%2F%3E%26nbsp%3B%20address%3A%20'%3A%3A'%2C%3CBR%20%2F%3E%26nbsp%3B%20port%3A%205432%20%7D%3CBR%20%2F%3E%5B14%3A00%3A05%5D%20Error%20-%20Unknown%3CBR%20%2F%3E%26nbsp%3Blisten%20EADDRINUSE%20%3A%3A%3A5432%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhich%20I%20think%20is%20the%20SPFx%20workbench%20port%20number.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECould%20we%20have%20more%20than%20one%20Node.js%20command%20prompt%20running%20at%20once%20please%20%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENIgel%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-42116%22%20slang%3D%22en-US%22%3Eresize%20workbnch%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-42116%22%20slang%3D%22en-US%22%3E%3CP%3Eit%20would%20be%20nice%20to%20be%20able%2Cto%2Cresize%20the%20work%20area%20of%20the%20workbench%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Microsoft

Hi everyone!

 

We're beginning to take a look at what should go in the next version of the SPFx Workbench.  If you've tried it out we'd love to get your feedback on what features would make it more useful to you as developers. 

 

Are there things it could do that would make you more productive?  Things that would help improve the quality of the projects you're building with SPFx?  All feedback is welcome and will help us plan out the next set of improvements.

11 Replies
Highlighted

it would be nice to be able,to,resize the work area of the workbench

Highlighted

It would appear that you can only have one Node.js command prompt at a time otherwise you get an error :- [14:00:05] Error - Unknown
 listen EADDRINUSE :::4321
{ [Error: listen EADDRINUSE :::5432]
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '::',
  port: 5432 }
[14:00:05] Error - Unknown
 listen EADDRINUSE :::5432

 

Which I think is the SPFx workbench port number.

 

Could we have more than one Node.js command prompt running at once please ?

 

Regards

 

NIgel

Highlighted

Hi Nigel!  Can you let me know what command (or sequence of commands) you're executing when you get that error?  I don't seem to have trouble keeping a couple Node.JS windows open at a time but it's likely just that I'm not doing exactly what you are.  Thanks!

 

-Jeremy

Highlighted

Hi Jeremy

  I was just using gulp serve in both command windows with different webparts.

 

Regards

 

Nigel

Highlighted

I talked to our devs and actually got an answer as to how to make this work today.  If you look in your web part Config folder you'll see a file named serve.json.  You should be able to change the port number in that config file (there are two entries in the file that use the number) and have side by side local work benches for two independent projects!

 

The default contents looks like this:

{  "port": 4321,  "initialPage": "https://localhost:5432/workbench",  "https": true,  "api": {    "port": 5432,    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"  }}

 

I believe you want to change the initialPage and port inside the API section. 

Highlighted

Hi Jeremy

 

Thanks for getting back to me on this.

 

I can understand how this could work.

 

Regards

 

Nigel

Highlighted

Allow to preview translated web part metadata in the toolbox in the workbench

 

When building multilingual web parts, developers should be able to verify that the different translations are displayed correctly in the web part toolbox. They should be able to verify this during the development process using workbench.

 

At the moment, only en-us is shown.

 

This was discovered by Waldek Mastykarz, i only repeat it here so it gets the attention it deserves.

This is described in more detail in this issue: https://github.com/SharePoint/sp-dev-docs/issues/329

 

 

Highlighted

Can you change the default port from 5432 please? That is the standard port used by PostgreSQL.

Highlighted
  • To have a full modern page experience (with the possibility of three columns etc.) instead of the current single column centred experience
  • Able to see how the content looks rendered in mobile experience / SharePoint App (I know this is possible through most browser dev tools, but might be nice to do it directly from Workbench)
  • A logger/call outs that captures the requests and responses generated by the web part - again, I understand that this is available in most browser dev tools
Highlighted

Ok Im an idiot :) I just switched back to the Workbench to coninue development and noticed the "mobile" and "tablet" links already available there  *duh*

Highlighted

Ok Im an idiot :) I just switched back to the Workbench to coninue development and noticed the "mobile" and "tablet" links already available there  *duh*