# Web View

{% hint style="info" %}
The web view involves a few parts, here we will look at getting just our plugin working, but for the (very) detailed breakdown of how the front-end of plugins works and all the components that are utilized, check the ['Advanced/Web View' page](https://docs.hollaex.com/plugins/develop-plugins/advanced/web-view). 
{% endhint %}

## Disabling CORS 

The first step we need to sort out is to disable CORs in the browser otherwise your web client does not communicate with the server.

At this point, Google Chrome is recommended. To disable CORS we have two choices:

1. Run the following in your terminal to open Chrome with CORS disabled:

   `google-chrome --user-data-dir="~/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials`
2. For an easier solution, install the following extension which can be used to disable CORs with ease: <https://webextension.org/listing/access-control.html>

With this done let's get started on developing the web view!

## Updating the Files

Now we are going to edit three files that are already inside the plugin (they have created automatically when we created the plugin initially). These files are:

1. `views.json` inside the `plugins/hello-plugin/views/view` directory.
2. `Form.js` in the same directory (`plugins/hello-plugin/views/view).`
3. `strings.json` inside the `plugins/hello-plugin/assets` directory.

### views.js

views.js only requires a single line to be changed, from its current placeholder value. The path is what needs to be changed to the hello plugin, like in the code below.

<details>

<summary>views.js</summary>

```json
{
  "meta": {
    "is_page": true,
    "path": "/hello-plugin",
    "hide_from_appbar": true,
    "hide_from_sidebar": false,
    "hide_from_menulist": false,
    "string": {
      "id": "title",
      "is_global": false
    },
    "icon": {
      "id": "SIDEBAR_HELP",
      "is_global": true
    }
  }
}
```

</details>

### Form.js

This will send a request to the endpoint that we have created and display exchange information to the user. Copy and paste the code in the block below.

<details>

<summary>Form.js</summary>

{% code title="Form.js" %}

```jsx
import React, { useEffect, useState } from 'react';
import { IconTitle, PanelInformationRow } from 'hollaex-web-lib';
import { withKit } from 'components/KitContext';
import Title from 'components/Title';
import axios from 'axios';

const Form = ({
  strings: STRINGS,
  icons: ICONS,
  generateId,
  plugin_url: PLUGIN_URL
}) => {

  const [info, setInfo] = useState();

  useEffect(() => {
    axios.get(`${PLUGIN_URL}/plugins/hello-plugin/info`).then(({ data: { exchange_info = {} }}) => {
      setInfo(exchange_info);
    })
  }, [])

  return (
    <div className="presentation_container apply_rtl verification_container">
      <IconTitle
        stringId={generateId('title')}
        text={STRINGS[generateId('title')]}
        textType="title"
        iconPath={ICONS['SIDEBAR_HELP']}
      />
      <form className="d-flex flex-column w-100 verification_content-form-wrapper">
        <div className="verification-form-panel mt-3 mb-5">
          <div className="my-4 py-4">
            <Title />
            <div className="py-4">
              {info ? Object.entries(info).map(([key, value]) => (
                <PanelInformationRow
                  key={key}
                  label={key}
                  information={value}
                  className="title-font"
                  disable
                />
              )) : (
                <div className="pt-4">Loading ...</div>
              )}
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}

const mapContextToProps = ({ strings, activeLanguage, icons, generateId, plugin_url }) => ({
  strings,
  activeLanguage,
  icons,
  generateId,
  plugin_url
});

export default withKit(mapContextToProps)(Form);
```

{% endcode %}

</details>

### strings.js

Finally, update the title and content in the strings.json file, from its default to what's in the code block below:

```json
{
  "en": {
    "title": "Hello exchange",
    "hello": "Hello {0}"
  }
}
```

## Compiling and Starting the Plugin

With the above changes, we can now actually take a look at the plugin on the page!

First up we will need to run the plugin. As always make sure you are in dev-mode and have docker-compose up and running in a terminal

In another terminal, navigate to the *hollaex-kit/plugins* folder, and run the following:

```
npm start --plugin=hello-plugin
```

{% hint style="info" %}
If you receive the following error: `sh: 1: concurrently: not found`, this simply means the *concurrently* package isn't installed. Simply `run npm start --plugin=hello-plugin` inside the plugins folder, let it run, and then try the npm start command again.
{% endhint %}

This will begin the process and may take a little while but once you see the green '*Compiled Successfully!'* message, we can move on to actually seeing the plugin!

<figure><img src="https://3965312054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MP899VqAdyGFgLTy9SY%2Fuploads%2FSo1y70LOU1ZomjQ2JEc4%2Fimage.png?alt=media&#x26;token=9f054dbe-9ebc-4258-a4e3-0bbf7858e906" alt=""><figcaption><p>Green = Good</p></figcaption></figure>

## Seeing the Plugin

Now for the moment of truth. Once the plugin has been compiled successfully, the browser may open to localhost:3000 automatically. If not automatically navigate to it yourself:&#x20;

{% embed url="<http://localhost:3000/>" %}

If everything has worked thus far, you should see a landing screen like the one below. This is our development-ready exchange!

You will need to make an account to access it, so do this and then log in.

<figure><img src="https://3965312054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MP899VqAdyGFgLTy9SY%2Fuploads%2FPEozIPrCZxz43gxuf62G%2Fimage.png?alt=media&#x26;token=5e781c55-f0e2-422a-ab40-af57cc348b1d" alt=""><figcaption></figcaption></figure>

Upon entering the exchange, you may notice something new on the sidebar (also in the screenshots, the exchange I set up was for the testnet and so looks a little different from the conventional HollaEx main screen).

<figure><img src="https://3965312054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MP899VqAdyGFgLTy9SY%2Fuploads%2FW8UCUzBUzTvC1Qlnro55%2Fimage.png?alt=media&#x26;token=71bc8b4c-0673-4251-af71-6be946a0598b" alt=""><figcaption><p>See if you can spot what we are looking for 👀</p></figcaption></figure>

In the sidebar, we now have a new option '*Hello plugin*' which is unsurprisingly the 'Hello Plugin' that we have been developing for the last few pages! Click on it and we will see the results of all our hard work.

<figure><img src="https://3965312054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MP899VqAdyGFgLTy9SY%2Fuploads%2F0VC6aY47HHSD0Z2PrV68%2Fimage.png?alt=media&#x26;token=c53dca58-8c84-4409-a880-05ec8284627f" alt=""><figcaption></figcaption></figure>

Now it main not be the most exciting page in the world, but hopefully, this goes to show the foundation of plugin development and is the first stepping stone that will get you going toward more exciting and unique plugin ideas!