SPFx Documentation Sharpoint Online
Install node js (Recommneded Node js is 8.x)
node package manager will install automatically
Install Yoeman -- scaffolding engine (which executes generators that prompt theuser with questions based onthe answers yroman will create the folders and files
npm install -- global yo
Install Sharepoint Frame work Yeoman Generator -- to create sharepoint frame work prjects folder structer for sharepoint projects
npm install --global @microsoft/generator-sharepoint
Install Gulp - it is just like a MS Build in veisual studio (Gulp is a task runner utility)
npm install --global gulp
______________________
For Every New Project
After navigating to the desired location, Create Folder with project name
md GetListItems
Run the Sharepoint Yeoman Generator for project folder structure
yo @microsoft/sharpoint
While Creating the project folder it will ask you few question related to the project for example if title description and all if you need to change the title and description after completing the project go to webpart.manifest.json file to update the title and descriotion and also you can update the icon of the webpart chossing icons from this url https://developer.microsoft.com/fabric#/styles/icons
Remember : we need to run the command gulp serve command after updating the details
After Createing all the folder struture execute the Gulp command
gulp serve
gulp serve --nobrowser (it will not open the browser but it excute the new changes)
______________________
Deployement Steps
Befor Package the solution :
update the version, webpartName.manifest.json file (it is not mandatory to update value, the defult value is "*", it will pick the version from package-solution.json file when it is "*".)
"version":"0.0.1"
Update the version in the package-solution.json file (The version number which you updated will be shown in the app version filed under app catalog site colllection.
"version":"1.0.0.0"
Update the version in the package.json file (Change the version every time the package changes)
"version": "0.0.1"
In the write-manifests.json file you jave to update "cdnBasepath":"Your doucment library path"
Example:https://dintakurthianil.sharepoint.com/sites/CommunicationSite/DeploymentFiles
Execute the below commands
gulp build --ship --> it bundle the project
gulp package-solution --ship --> it creates the .sppkg file and "--ship" will take care of creating the files under temp\deploye folder with all the webpart assets files and webpart bundle. The .sppkg file is generated in the sharepoint\solution folder (once you run this command sharepoint folder is created)
we can directly open the page in sharepoint local workbench by using below code that you have to place in confi\serve.json file
"serveConfigurations": {
"default": {
"pageUrl": "https://dintakurthianil.sharepoint.com/sites/CommunicationSite/_layouts/15/workbench.aspx"
},
"myConfig": {
"pageUrl": "https://dintakurthianil.sharepoint.com/sites/CommunicationSite/_layouts/15/workbench.aspx"
}
}
node package manager will install automatically
Install Yoeman -- scaffolding engine (which executes generators that prompt theuser with questions based onthe answers yroman will create the folders and files
npm install -- global yo
Install Sharepoint Frame work Yeoman Generator -- to create sharepoint frame work prjects folder structer for sharepoint projects
npm install --global @microsoft/generator-sharepoint
Install Gulp - it is just like a MS Build in veisual studio (Gulp is a task runner utility)
npm install --global gulp
______________________
For Every New Project
After navigating to the desired location, Create Folder with project name
md GetListItems
Run the Sharepoint Yeoman Generator for project folder structure
yo @microsoft/sharpoint
While Creating the project folder it will ask you few question related to the project for example if title description and all if you need to change the title and description after completing the project go to webpart.manifest.json file to update the title and descriotion and also you can update the icon of the webpart chossing icons from this url https://developer.microsoft.com/fabric#/styles/icons
Remember : we need to run the command gulp serve command after updating the details
After Createing all the folder struture execute the Gulp command
gulp serve
gulp serve --nobrowser (it will not open the browser but it excute the new changes)
______________________
Deployement Steps
Befor Package the solution :
update the version, webpartName.manifest.json file (it is not mandatory to update value, the defult value is "*", it will pick the version from package-solution.json file when it is "*".)
"version":"0.0.1"
Update the version in the package-solution.json file (The version number which you updated will be shown in the app version filed under app catalog site colllection.
"version":"1.0.0.0"
Update the version in the package.json file (Change the version every time the package changes)
"version": "0.0.1"
In the write-manifests.json file you jave to update "cdnBasepath":"Your doucment library path"
Example:https://dintakurthianil.sharepoint.com/sites/CommunicationSite/DeploymentFiles
Execute the below commands
gulp build --ship --> it bundle the project
gulp package-solution --ship --> it creates the .sppkg file and "--ship" will take care of creating the files under temp\deploye folder with all the webpart assets files and webpart bundle. The .sppkg file is generated in the sharepoint\solution folder (once you run this command sharepoint folder is created)
we can directly open the page in sharepoint local workbench by using below code that you have to place in confi\serve.json file
"serveConfigurations": {
"default": {
"pageUrl": "https://dintakurthianil.sharepoint.com/sites/CommunicationSite/_layouts/15/workbench.aspx"
},
"myConfig": {
"pageUrl": "https://dintakurthianil.sharepoint.com/sites/CommunicationSite/_layouts/15/workbench.aspx"
}
}
Comments