how to use lightning web component(lwc) in lightning communities

This post explains how to use lighting web components in communities.

To use the lightning component in communities component must implement the forceCommunity:availableForAllPageTypes interface but in lightning web components we will use the Configuration file.
Ex: <componentname>.js-meta.xml
Config the Configuration file as per the requirement.

Example:

lwcCommunitiesDemo.html

<template>
    <lightning-card title="Design Attribute Demo" icon-name="custom:custom19">
        <center>
            <h3>HI, <b>{strName}</b></h3><br />
            <div if:true={showDetails}>
                <ul>
                    <li> Emp Name: <b>{empName}</b></li>
                    <li> Emp Department: <b>{empDepartment}</b></li>
                    <li> Emp Location: <b>{empLocation}</b></li>
                    <li> Emp Age: <b>{empAge}</b><br /></b></li>
                    <li> Emp Gender: <b>{empGender}</b></li>
                </ul>
            </div>
        </center>
    </lightning-card>
</template>

lwcCommunitiesDemo.js

export default class lwcCommunitiesDemo extends LightningElement {
    @api showDetails = false;
    @api strName;
    @api empName;
    @api empDepartment;
    @api empLocation;
    @api empAge;
    @api empGender;
}

<target>
1.  This property indicates that where we need to use the component(record page, app page, and home page, etc).
2.  To use component in communities add lightningCommunity__Page, lightningCommunity__Default targets in Configuration file.
<targetConfigs> 
These properties are used to design your component as per your need.

lwcCommunitiesDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcCommunitiesDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>

      <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="strName" type="String" default="Salesforce Code Crack" label="Enter the Employee Name"/>
            <property name="showDetails" type="Boolean" default="true" label="Do you want to Show Details ?"/>
            <property name="empName" type="String" default="" label="Enter Employee Name"/>
            <property name="empDepartment" type="String" default="" label="Enter Employee Department"/>
            <property name="empLocation" type="String" label="Enter Employee Location" datasource="Hyderabad, Delhi, Pune, Noida"/>
            <property name="empAge" type="integer" label="Enter Employee Age"/>
            <property name="empGender" type="String" label="Enter Employee Gender" datasource="Male, Female"/>
        </targetConfig>
      </targetConfigs>

</LightningComponentBundle>

Result