Development Environments

1. Plainfile

Firefox

In this development you can open your app’s entry point (app.html or index.html) directly with your browser from the disk.

You would do the same for the widget’s test html files when developing and debugging a new widget.

In firefox, type this into your browser’s address bar:

file://abs/path/to/file.html

(abs typically has one more extra /, i.e. the final url would look like file:///home/user/etc).

Enable web developer tools in Firefox from the menu bar:

Tools -> Browser Tools -> Web Developer Tools

And you have yourself a first class in-browser development / debugging environment. On code changes you simply need to refresh the browser view.

In order to be able to follow links in your app.html, you still need to give firefox a full file access and create a separate development profile for that. Start firefox with:

firefox -ProfileManager

Therein, create a separate profile for firefox, called “development” and use that profile.

Within then development profile, type into your firefox’s address field:

about:config

Search for fileuri & set the property

security.fileuri.strict_origin_policy

to false.

You can start firefox in that profile with

firefox -P development

WARNING : the security.fileuri.strict_origin_policy allows firefox to read any file on your filesystem so be carefull not to browse in the web using the “development” profile!

You might also prefer a more sophisticated way of isolation, say “firejail” or the like.

At this stage of the development (developing individual widgets and putting initially together your fullstack app), you would typically use a mock datasouce (for more details, see datasources in here)

Google Chrome

You can achieve same unlimited file access with Google Chrome by launching it with a command-line argument:

google-chrome --allow-file-access-from-files .

The same words of warning as for the Firefox case (see above) apply when running Google Chrome in the special unrestricted mode.

2. Native

In this mode, a reverse-proxy server (nginx) is serving you the html and js files.

When using this development mode, you’d already have a backend you want to play with.

A simple python wrapper for nginx is provided, start it with

./nginx.py --help

to see the options.

Refer to the Fullstack Example to see an actual working example.

3. Docker

Here we assume that you have initiated your project with the Fullstack Example Repo.

A docker image file frontend/Dockerfile.dev is provided. It simply runs nginx with the provided nginx.conf from frontend/docker/dev/ directory.

All code in frontend/ is mounted into a docker volume, allowing you to edit and “hot reload” the code live in frontend/.

Refer to the Fullstack Example to see an actual working example.