Updated README file

This commit is contained in:
zachroberts8668 2020-04-14 09:05:08 -04:00
parent ccad99d87b
commit 989ef79e2f
2 changed files with 43 additions and 34 deletions

View File

@ -1,53 +1,62 @@
# react-personal-greeting
This project uses [React](https://reactjs.org).
## Summary
> This is where you include your project's documentation.
The web part pulls in the current user's name and displays it on the page. The greeting text before the name is customizable through the property pane. Additionally the position of the greeting and color of the text can be adjusted through the proptery pane as well.
## Global dependencies
[picture of the web part in action](assets/react-personal-greeting.gif)
Requires Gulp globally installed:
## Used SharePoint Framework Version
```shell
npm install --global gulp
```
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
## Building the code
## Applies to
Download & install all dependencies, build, bundle & package the project
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
* [PnP SPFx Controls](https://sharepoint.github.io/sp-dev-fx-controls-react)
* [PnP SPFx Property Controls](https://sharepoint.github.io/sp-dev-fx-property-controls)
```shell
# download & install dependencies
npm install
## Prerequisites
# transpile all TypeScript & SCSS => JavaScript & CSS
gulp build
# create component bundle & manifest
gulp bundle
## Solution
# create SharePoint package
gulp package-solution
```
Solution|Author(s)
--------|---------
react-personal-greeting|Zach Roberts - [SPODev](https://spodev.com)
These commands produce the following:
## Version history
- **./lib**: intermediate-stage commonjs build artifacts
- **./dist**: bundled script, along with other resources
- **./temp/deploy**: all resources required by component(s) to deploy to a CDN (when `--ship` argument present)
Version|Date|Comments
-------|----|--------
1.0|April 14, 2020|Initial release
## Build options
## Disclaimer
- `gulp clean`: Deletes all build output (**/dist**, **/lib**, **/temp**, etc.).
- `gulp build`: Transpiles all TypeScript & SCSS to JavaScript & CSS, generates source map files & TypeScript type declaration files
- `gulp bundle [--ship|-p|--production]`: Runs gulp task **build**, then uses webpack to create the JavaScript bundle(s) and component manifest(s) as defined in **./config/config.json**. The `--ship`, `-p` or `--production` argument specifies a production build that will generate minified bundles.
- `gulp serve [--ship|-p|--production]`: Runs gulp tasks **build**, **bundle** & starts the local webserver. Depending on the project type, it opens the browser and navigates to the local workbench or specified URL (in the case of extension components). The `--ship`, `-p` or `--production` argument specifies a production build that modifies the resulting package for production hosting rather than local hosting of assets.
- `gulp package-solution`: Creates the SharePoint Package (**.sppkg**) file.
- `gulp dist`: Creates a production-ready SharePoint Package (**.sppkg**) file. The following gulp task gets executed in this specific order `gulp clean`, `gulp bundle`, `gulp package-solution.`
- `gulp dev`: Creates a development-ready SharePoint Package (**.sppkg**) file. The following gulp task will be executed in this specific order `gulp clean`, `gulp bundle`, `gulp package-solution.`
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
> View all available gulp tasks by running `gulp --tasks`
---
More information on [SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview)
## Minimal Path to Awesome
Generated with [pnp/spfx](https://github.com/pnp/generator-spfx/).
* Clone this repository
* in the command line run:
* `npm install`
* `gulp build`
* `gulp bundle --ship`
* `gulp package-solution --ship`
* add the webpart to your tenant app store
* add the app to a SharePoint site and then add the webpart to the page
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
* Using the SPFx context to gather the current user's display name.
* Adjusting the styles of the component in the webpart using the props adjusted through the property pane.
* PnP SPFx Placeholder - This component allows you to have a placeholder visble under certain conditions if your web parts requires some setup.
* PnP SPFx Color Picker - This component adds an awesome color picker to the property pane, great for adjusting colors in your webpart.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-greeting" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB