This text file provides a brief overview of how to update the files for local development.

Reasons for local development include:

- No access to the internet at times

- Testing new development features on existing demos

These instructions work when running exaples from both node [DataFormsJS\examples\server.js]

and also when running a local build of the main site [Website\index.php]

*) For local development the following changes can be made to HTML files under [DataFormsJS\examples]

Replace the root dir all JS/JSX CDN Links with "../js/"

Example Before:

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>

After:

<script type="text/babel" src="../js/DataFormsJS.min.js"></script>

This applies to the import statements on Web Component HTML examples as well:

Before:

import { componentsAreSetup } from 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/utils.min.js';

After:

import { componentsAreSetup } from '../js/web-components/utils.min.js';

For Hello World examples under [DataFormsJS\examples\hello-world]

Go up to levels to the root folder:

<script src="../../js/DataFormsJS.js"></script>

Also for testing the Web Component Polyfill in Modern Browsers use:

<script src="../js/web-components/polyfill.js"></script>

In general a combination of [module="type"] and [nomodule] is used to handle

different browsers, however the [polyfill.js] runs in all browsers and is easiest

to develop with modern browsers.

*) Vendor Directory - If using Vue, React, Handlebars, etc locally then create a [DataFormsJS\vendor] Directory

and place vendor scripts directly in it. Then in the examples update relevant code:

Before:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

After:

<script src="../vendor/vue.js"></script>

If developing with local flags from [semantic-ui] download both [flag.min.css] and [flags.png], and update the css

to look in the same directory:

Before:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">

After:

<link rel="stylesheet" href="../vendor/flag.min.css">

The [.gitignore] file excludes the [vendor] directory from source control

*) Entry Form Web Service (Requires full setup with PHP)

Instructions:

Find and replace the URL text as needed to switch between local development and the live server.

Local development can be used if no internet is available or to develop new server features.

Pages:

dataformsjs/examples/entry-form-demo-hbs.htm

dataformsjs/examples/entry-form-demo-vue.htm

dataformsjs/examples/html/entry-form-record-list-hbs.htm

dataformsjs/examples/html/entry-form-record-list-vue.htm

dataformsjs/examples/entry-form-auth.js

Local URL:

http://localhost:3000/data/example/entry-form/

Live Server URL:

https://www.dataformsjs.com/data/example/entry-form/