The dark side of this story is that, SPFx is very under documented. 🙁 This means you can’t find really good examples like case studies for Azure. Therefore when you should do a simple solution which creates at least 2 lists with a Lookup field between them, you are in trouble, because Microsoft doesn’t spend enough time to provide you a great documentation.

Luckily, I must solve this and my ambition pushes me toward the solution. After several days (in this case 6 working days), I spent in front of my laptop and tried to collect the crumbs of the information from the Internet…I made it. And now I would like to share it with you to avoid the sucks if you have to do this stuff. 🙂

Our target for Today to create an SPFx based app to SharePoint online which creates 2 lists with a Lookup field.

Step 1: Prepare the solution in Visual Studio code

For this the Microsoft provides a quite good overview documentation. Nevertheless I put here some extra steps for the better result.

Configure msvs_version. This depends on your computer so you can use the following version related configurations. Choose one which works for you:npm config set msvs_version 2017 or npm config set msvs_version 2019

Now you can start to create your solution.

Step 2: Create basic project/solution in Visual Studio code

Open the root directory of your development location on your computer.

Create a directory for your solution. Today this would be multiple-lists-spfx

Step into the newly created directory

Open Visual Studio code on this directoryFrom PowerShell: code .From Windows explorer: Open with Code

Open a Terminal, then enter the following command:yo @microsoft/sharepoint

Preconfigure the project:

Accept the default multiple-lists-spfx as your solution name, and then select Enter.

Select SharePoint Online only (latest), and then select Enter.

Select Use the current folder as the location for the files.

Select N to require the extension to be installed on each site explicitly when it’s being used.

Select N on the question if solution contains unique permissions.

Select WebPart as the client-side component type to be created.

Web part name: MultipleLists

Web part description: MultipleLists description

Accept the default No JavaScipt framework option for the framework, and then select Enter to continue.

At this point, Yeoman installs the required dependencies and scaffolds solution files. It takes several minutes.

Post-configuration / additional checks

1. Open gulpfile.js and replace its content to the following – to use gupl as a global variable