  # Formbird Codespace
Using the github codespace functionality we can now host and edit components through Github and Visual Studio Code Online. 
Component development can now be performed from within the browser with component updates only a refresh away. 

 ## Create Codespace
Open **Formbird** forbird-sc-components github here:
>[formbird-sc-components](https://github.com/formbird/formbird-sc-components)

Create the codespace environment
> Click the green **<>Code** 
Select the **codespaces** tab
Click the dropdown on right of **Create codespace on angular**
Select **Configure and create codespace**
Change machine type from **2-core** to **4-core** 
Click **Create codespace**
Allow codespace to open. Once the page is loaded

Once the page is loaded open terminal by...
> **Ctrl `** <sub> (windows)</sub> or **CMD J**<sub>(mac)</sub> 

## Set up Environment
Now we want to set up the enironment as you would a local one. 
> To set up the dependencies.
> **yarn**

>If you have any issues try 
> **yarn cache clean** 

Then we want to compile and build the project
> **yarn dist**

Next time you want to use the environment you can simply navigate to the codespaces dropdown in formbird-sc-components and select from your codespaces

## Running the environment 
Once the environment is set up should just be able to run the following:
> npx ng serve sc-components

Newer update (11/8/22) to run :
> yarn serve

This will open a new tab and the url can then be supplied to component files in formbird.com
> eg. https://formbird-formbird-sc-components-...-4200.githubpreview.dev/... 

Note you may have to change the **port visibility** to **Private to Organisation** or **Public**
> To do this navigate to terminal in codespace
> In the **TERMINAL** window, click on **PORTS** tab
> Right click and select **port visibility**
> Change to desired setting

## Using Codespace with formbird.com
New angular components can use the simplified component template setup which uses the default page template definition

Start by navigating to the codespace directory 
> formbird-sc-components/projects 

Locate the component that requires development. If you are creating a new one seek Michaels help :)
> eg. sc-signature

Next find the src app code
> sc-signature/src/app/signature

In signature.module.ts under class add a new custom element field which allows the formbird api to reference the application using the name you provide. Note we will be hosting the component as **sc-signature-new** to avoid conflicts with previous version.
>eg. customElementService.convertToCustomElement(SignatureComponent, 'sc-signature-new', this.injector, ClientConstants.ANGULAR_COMPONENT_SUFFIX, pjson.version);

Open [comp-dev-ng - Template Editor](https://comp-dev-ng.formbird.com/form/74746c80-8378-11e6-99b1-71ee944cf59f)
Add relevant details to template. Note can use [component editor](https://comp-dev-ng.formbird.com/form/5f6000a0-0828-11e6-9b64-1b27992111e1) to create component.
>{{ 
	**"name": "sc-signature-new",
    "componentHtml": "",
    "fieldWatchFunction": "",
    "componentLoadFunction": "",
    "systemHeader": {
        "systemType": "component",
        "templateId": "5f6000a0-0828-11e6-9b64-1b27992111e1",
        "createdWith": "5f6000a0-0828-11e6-9b64-1b27992111e1",
        "currentVersion": true,
        "summaryName": "sc-signature-new",
        "keyIds": [],
        "createdDate": "2022-07-28T05:23:51.192Z",
        "createdBy": "599f95d0-936a-11ec-b26d-7da72dab73ce",
        "documentCreatedDate": "2022-07-27T07:43:41.136Z",
        "documentCreatedBy": "540e51dd83fb24502699c93f",
        "versionId": "770f9980-0e35-11ed-9977-79b0183037a9",
        "serverUpdatedDate": "2022-07-28T05:23:50.778Z",
        "serverCreatedDate": "2022-07-28T05:23:50.778Z",
        "previousVersionId": "53e05620-0e35-11ed-9977-79b0183037a9"
    },
    "documentId": "acda2aa0-0d7f-11ed-ab35-db46d5f5bdd1",
    "versionInfo": "ANGULAR_COMPONENT_RELEASE",
    "appTags": [
        "system",
        "components",
        "componentDefinition"
    ],
    "componentTestUrlLink": "/form/2504aeb0-7448-11e6-949c-9f3b8c69d8b6",
    "versionNumber": "7.0",
    "componentDescription": "####Configuration Fields\n| Field | Values  | Default (if not present) |  Details | \n | ---- | ---- |  ---- |  ---- | \n |  name  |` values `|  not-set |  description  |\n####Description\nAllows a signature or screen writing to be captured",
    "restfulWebServiceFunctions": "",
    "serverPreprocessorFunction": "",
    "componentCleanupFunction": "",
    "vendorLibrariesRel": [
        {
            "documentId": "ef1dbb2d-2c0e-4f1c-a42d-77c1562be6b2",
            "name": "formbirdAngularElementsStylesProdCDN",
            **"fileName": "https://formbird-formbird-sc-components-....githubpreview.dev/styles.css"**
        },
        {
            "documentId": "58d8730c-3ff6-4856-9401-0c15f42f4455",
            "name": "formbirdAngularElementsRunTimeProdCDN",
            **"fileName": "https://formbird-formbird-sc-components-....githubpreview.dev/runtime.js"**
        },
        {
            "documentId": "abaaad2b-90fd-4b7b-b767-792b85dfb93f",
            "name": "formbirdAngularElementsPolyfillsProdCDN",
            **"fileName": "https://formbird-formbird-sc-components-....githubpreview.dev/polyfills.js"**
        },
        {
            "documentId": "7b431aa0-0173-4cdc-ba74-c6c729f03e91",
            "name": "formbirdAngularElementsMainProdCDN",
            **"fileName": "https://formbird-formbird-sc-components-....githubpreview.dev/main.js"**
        }
    ],
    "compDevTestUrlLink": "/form/2504aeb0-7448-11e6-949c 9f3b8c69d8b6"
}

In the case of sc-signature-new all we have to do now to host the component is ensure the codespace environment is running and we change the 4 **filename** prefixes to our github url inside the vendorLibrariesRel object.
>eg. filename: https://formbird-formbird-sc-components-....githubpreview.dev/
>
## sc-signature-new documents for reference
Signature example template:
https://comp-dev-ng.formbird.com/form/2720cf30-0d80-11ed-9b16-af366aef3293

Component template:
https://comp-dev-ng.formbird.com/form/acda2aa0-0d7f-11ed-ab35-db46d5f5bdd1/74746c80-8378-11e6-99b1-71ee944cf59f
