Microsoft 365 Community SharePoint, 24 Aug 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Improving your SPFx development process with environment variable

Description

📺 In this 14 minute developer focused demo, Hugo shows us a recommended way when to deal with values like URLs or tenant IDs when working in teams or sharing your code/using source control to deal with: Envirohment variables. They are a convenient way to not have always to change values for different teams or different development stages. Hugo contextualizes this approach for SPFx development showing the necessary tools.

This demo is taken from the Viva Connections and SharePoint Framework community call 24th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Hugo Bernier (Microsoft) | @bernierh

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

Foreign, so my session today is called improving your spfx development process with environment variables. uh Thank you, vesa, for making the title a lot more sophisticated than I had originally submitted. I think originally I said me, show environment thing, um so that's much better. So what we're going to talk about today is actually recommended by oops certificate. All right, I'm going to use. My keyboard is recommended by two out of three spfx developers, so this is going to be useful to you.

A

If you're talking about uh you know, work if you're working in a team and you're working with multiple developers who use different uh URLs for their development tenant, uh it's also for anyone who's sharing their code, people who are writing samples, and things like that. um You know. Obviously, if you're sharing your code and you're sharing a sample, you probably don't want to show your tenant in your code when you're sharing it with other people and uh probably people who are working by themselves or not really sharing their code or maybe Bo.

A

Those people would not really care about these kinds of this kind of feature. But let's talk about how to use environment variables so normally in your SharePoint framework project you'll have in the config folder you'll have something called serve.json and the recommended Behavior here is to go set your initial page and put the URL that you use for your environment and then the cool thing about that is when you type gulp serve. It serves your sample. It goes to the page that you specified in the initial page and you get to test your webpart.

A

You get to debug it and do cool stuff like that. But let's talk about team working scenario here, where you've got maybe a whole bunch of developers. You know dev1 dev2 dev3. They all have a different SharePoint URL, so dev1.sharepoint.com, dev2, dev3 and so on and so forth. And then let's pretend that you also have a integration environment. Maybe it's a it's a separate Dev tenant, or maybe it's a separate site where you test your things. So in this case I'm using contoso dev.sharepoint.com.

A

Maybe you have a separate environment for QA and production. So how do you uh address that? How do you work with that? If you're sharing code and you're, you know putting code and Source control, and things like that, you don't want to be changing this every single time, um so one option obviously is to type gulp serve dash, dash new browser that works, um then you, you know it launches as gulp serve, and then you go to your your own.

A

um You know browser and you hit the the workbench URL and you'll be able to get your your web part in in test mode right, you'll be able to play with it, but these scenarios kind of become a little bit more complicated when you try to debug your webpart, for example, and if we look at the code sharing scenarios right we'll see, uh we always end up having things like this like enter, enter your SharePoint site right and if you're not paying attention, you start gulp serve, and it gives you an error.

A

You can't find it and then, if you're like me, you're, probably spending a lot of time, uh trying to figure out why your web part is broken when it's really that you're navigating to the wrong URL.

A

Now the spfx team is constantly improving things and they're, always adding new features, cool features, uh but sometimes it's hard to keep up and sometimes it's hard to pay attention to all the announcements when they do so many cool things. So in SharePoint framework 117 in the release notes they snuck in something that I think is going to be very useful. If we look in the release notes, oh we've got blurry uh see.

A

If we can clear this up, they added something called the ability to use spfx, Serve, tenant domain, OS environment variables for serve configurations, and what it says is that you can actually go in your operating system, set an environment variable and specify the domain or the site URL in your configuration, and you can use it across usbfx, Solutions and then anywhere that you need to use uh in the the page URL. Then you can actually put squiggly tenant domain as a placeholder and it will automatically replace it in the variable.

A

So, let's talk about that so again, you have an environment variable in your operating system, called spfx serve pennant domain I'm, not reading the underscores by the way, um and then in your configuration you actually just get to put tenant domain between squiggly brackets in your configuration. So how would this look like if I go to myserve.json you get to see here that I have the tenant domain now. The one thing I should I should make clear. Is that the the default behavior is to have?

A

They already include the https, and the other already include the underscore layout and workbench in the URL. So really all you would be doing here is putting your SharePoint domain right. So mine is hpdemos.sharepoint.com. That's all you'll put there now.

A

You can also agree with your team that your environment variables could include the https and the the specific URL name. If you wanted to you're allowed to do that, but the one thing is: if you're going to share that code with people outside the the team, if you're going to be sharing samples, I would recommend that you always stick to the standard of leaving the https and leaving the underscore layout, slash Works, slash workbench.espx, so that it's just consistent for everybody.

A

Now, if you're in Windows, how do you set up your environment variable, especially if you don't have administrative privileges, uh you in your start menu you search for environment, you'll, see a giant button here that says edit the environment variables and then it'll bring you an old um dialog box from previous versions of Windows, apparently and you'll have a environment variable button in the lower right corner you just get to go to the environment variable and then you'll see that you have a few environment variables already set up.

A

You just click next to add a new environment variable. This is where you would paste come on. This is where you would paste the in this box right here.

A

You would spaced spfx underscore serve underscore tenant domain and then in the value you would put your um your your tenant right. Your tenant domain again best practice is don't use the full URL just use the time doing. Unless you agree as a team to do this, you click OK and on your next session it will actually use that environment now, one trick I found is, if you just run, Explorer it'll actually refresh that so you type explore it refreshes that now you can actually do that also using uh in Windows.

A

You can use your command line to do this, that works in either uh dos or Powershell. You can do set X spfx served antenna domain and then the value that you want to put, but it does require admin uh privileges to do that. Unfortunately, now the cool thing is once you've done that again, you just do gulp serve and it will go directly to your tenant and you'll see it's kind of cool. It just puts in the value that you're looking for I know.

A

It looks a little bit blurry now you might say well what, if I'm testing different environments right? What? If I'm uh again testing my my Dev environment and then I want to do QA and I want to do things like that.

A

Oh yes, and for those of you, you can also do this in uh bash and uh and Linux, and um it's just the process is slightly different uh to do so, but pretty much all the major operating systems that, where you can develop, spfx support environment variables as well um and I apologize I work for Microsoft I'm talking about Windows.

A

um Now, if you wanted to actually set up the variable um temporarily, because you want to test it somewhere else, of course you could go and change to serve.json configuration, but that can be annoying. um You can actually just say set instead of set X and set will set that value temporarily for your session uh in Windows. You would do that in Powershell. You would use environment. Spfx tenant domain equals the value.

A

um Now there is a cool trick that you can do. Is you can you can actually combine these commands together? So if you want to temporarily um serve a specific domain, you can actually write the command here where you say my environment. Is this URL and gulp serve and what it will do is for that command.

A

It will run in that in that URL for you and then, when you're done with that, that environment uh variable will be reset to uh your your standard environment variable which is very cool, and you can imagine obviously, by doing this, you can actually start playing with your gulp command to do this kind of stuff, but that's a whole different conversation all right. So let's try to um wrap this up here. You might also say that well wait a minute I'm using a a remote container to actually develop.

A

It's like you and I practice this presentation, because you can actually go to your devcontainer.json and in the dev container.json for your remote containers. You can actually say you can add this this in here, which says the remote environment variables, uh these remote environment variables will be promoted. So what you can say is I want this environment variable spfx serve tenant domain to be pre-populated by my local environment, which is very cool because then you can just start a remote container do gulp serve. It will automatically go to your uh development.

A

Tenant- okay, one last little bit here, uh because, if you're working as a developer- and you have your own developer tenant- and you have your your work tenant- you might be struggling with having to log in and you might be using things like incognito mode or in private mode. But there's a better way to do this. That will work way better for this and I'm using Edge here. But you could do this in Chrome as well. You'll notice that in the upper left corner, sometimes it's in the upper right corner.

A

It depends on uh where Microsoft feels like that day. But you'll see that you have a kind of a profile here and it'll say work or personal or something like that. But what you can do is you can actually go to your browser and if you click on your little browser profile thingy, you can actually go click on other profiles and then set up a new work profile.

A

When you do that, it'll prompt you to log in so you'll say sign in to sync your data. If you don't want to sign in to sync your data, that's fine! But what I do like to be able to do is any the any workstation that I work on I know that when I log in on that profile, all my history, my bookmarks, my everything, my my preferences are configured and synchronized.

A

So I will skip you uh or spare you the part where I'm logging in here, but once my profile is created, it's going to have a name like profile tree. You can actually click on the little profile settings to change your profile name so do edit you can rename it so, let's say I'm going to say this is my contoso environment. You can pick a gratuitous image if it if it, if you enjoy to do so or you can even sync with your actual company profile image.

A

But once that's done, one of the cool things you can do is, if you scroll down a little bit under profile preferences right here, there you go, you can actually go in and you can say, I'm going to add a profile preference, so I'm going to say anything. That's got contoso.chairpoint.com or dev1.sharepoint.com. Whatever you want, you can say, switch my profile to this browser profile and the cool thing about that is when you do gulp serve, and let's actually go do that.

A

So you see here, I have my work profile um already showing on the browser. If I do, Gulf serve and I had to speed it up, I apologize, but when you do go up serve, it actually launches immediately, in my case my HP demo environment, where I can actually test my webpart.

A

So this is a cool way to work with teams to share your code and to really accelerate your development process, especially if you're using application, lifecycle, management and Automation, and things like that, because you're never hard coded your URLs you're using environment variables to do so, and that's it for me. Thank you, everyone for your time. Thank you, foreign.