Microsoft has already announced the General Availability for SharePoint Framework. We can develop modern web parts for SharePoint using SharePoint Framework (SPFx). Web Parts developed using SPFx can be added to modern view pages as well as classic pages in SharePoint.
A. Install Node Dependencies for SharePoint Framework.
B. Install desired source code editor (e.g. Visual Studio Code, ATOM, Sublime).
A. Open Node.js Command Prompt.
B. Navigate to the directory where you want to have your solution located at (e.g. cd c:\SPFx).
C. Execute command: yo
D. This will list down the available generators. As we have already installed Microsoft SharePoint Generator, this will appear as an option here.
E. Select “Microsoft SharePoint Generator” and press enter.
F. This will ask for below details, enter appropriate details and move forward:
G. Once solution is created, we can see success message for solution creation as shown below:
H. To check the solution, open the solution in Visual Studio Code from file system directory (C:\SPFx) where we created the solution.
I. As this post is focused on to prepare the development environment for SPFx, we will not go in depth with the source code, but as we can see in below screenshot, default Hello World web part appears in the solution:
A. Open Node.js Command Prompt and navigate to the directory where we created the solution (C:\SPFx).
B. Execute command “gulp serve” as shown in below screenshot:
C. On execution, we get SharePoint User Interface in browser on localhost (It is NOT required to have SharePoint installed on development environment). And when we click “+” button on modern UI, we can see Hello World web part in available options as show below:
D. When web part is added on the page, we can see the same as shown below:
Prepare your development environment for SharePoint Framework development:
A. Install Node Dependencies for SharePoint Framework.
1. Download and Install Node.js.
2. Open command prompt and execute below commands one by one to install bower, grunt-cli and yeoman respectively.
3. Install Microsoft SharePoint Generator by executing below command in command prompt.
4. Install Gulp by executing below command in command prompt.
2. Open command prompt and execute below commands one by one to install bower, grunt-cli and yeoman respectively.
i. npm install -g bower
ii. npm install -g grunt-cli
iii. npm install -g yo
ii. npm install -g grunt-cli
iii. npm install -g yo
3. Install Microsoft SharePoint Generator by executing below command in command prompt.
i. npm i @microsoft/generator-sharepoint -g
4. Install Gulp by executing below command in command prompt.
i. npm install gulp -g
B. Install desired source code editor (e.g. Visual Studio Code, ATOM, Sublime).
Build your first web part using SharePoint Framework (SPFx):
A. Open Node.js Command Prompt.
B. Navigate to the directory where you want to have your solution located at (e.g. cd c:\SPFx).
C. Execute command: yo
D. This will list down the available generators. As we have already installed Microsoft SharePoint Generator, this will appear as an option here.
E. Select “Microsoft SharePoint Generator” and press enter.
F. This will ask for below details, enter appropriate details and move forward:
i. Solution Name – e.g. “HelloWorld”.
ii. Select “Use the current folder” option.
iii. You can select the JavaScript Web Framework from available options. I have selected “No JavaScript Web Framework” option for this application.
iv. What is your webpart name? – e.g. “HelloWorldWP”
v. What is your webpart description? – e.g. “Hello world web part developed using SharePoint Framework.”.
vi. This will take a few minutes to prepare the solution.
ii. Select “Use the current folder” option.
iii. You can select the JavaScript Web Framework from available options. I have selected “No JavaScript Web Framework” option for this application.
iv. What is your webpart name? – e.g. “HelloWorldWP”
v. What is your webpart description? – e.g. “Hello world web part developed using SharePoint Framework.”.
vi. This will take a few minutes to prepare the solution.
G. Once solution is created, we can see success message for solution creation as shown below:
I. As this post is focused on to prepare the development environment for SPFx, we will not go in depth with the source code, but as we can see in below screenshot, default Hello World web part appears in the solution:
Run SPFx solution on development environment:
A. Open Node.js Command Prompt and navigate to the directory where we created the solution (C:\SPFx).
C. On execution, we get SharePoint User Interface in browser on localhost (It is NOT required to have SharePoint installed on development environment). And when we click “+” button on modern UI, we can see Hello World web part in available options as show below:
D. When web part is added on the page, we can see the same as shown below:
So, the environment is prepared and
verified for SharePoint Framework (SPFx) development. For verification, we have
used default Hello World web part, we can develop the web parts as per
requirements.
If you have any questions you can reach out our SharePoint Consulting team here.
No comments:
Post a Comment