TL;DR
=====
Unregister (disable) the service worker in production builds of Cockpit. The
CRA dev server doesn't enable the service worker, so no changes are needed in
that context, i.e. `yarn start` in the monorepo.
**NOTE**: to effect these changes a user will need to load production Cockpit at
`localhost:55555` and then close all Cockpit tabs (or restart the
browser). This should be done for each browser that has been used to access
production Cockpit. See the *Step-by-Step* section below for more information.
Rationale
=========
There are a couple of factors:
* It's a bit confusing that after stopping `embark run` the production build of
Cockpit is still accessible at `localhost:55555`. That's owing to CRA's
[offline-first behavior][PWA] per the service worker it creates, which
Cockpit [currently registers][current] (enables).
* It can be really confusing, if you don't know or forget about the service
worker's behavior, that after a production rebuild of Cockpit the old build
is still used in the browser, even after a page refresh. As [explained][ofb]
in CRA's docs: *"users will end up seeing older content until they
close (reloading is not enough) their existing, open tabs."* A similar effect
is seen when switching between DApps, e.g. teller and embark_demo.
The CRA docs point to [some code][code] that could be adapted to an alert in
the UI prompting the user to close all tabs and reopen the app. That approach
definitely makes sense for DApps built with CRA that have opted-in to the
service worker. In fact, the service worker behavior would be critical in DApps
that make use of connected-/react-router because cold loads of routes that
don't actually correspond to static files couldn't otherwise work, i.e. if the
DApp is being served from ipfs/swarm.
But for Cockpit itself, when served from localhost with an express backend that
we control, little seems to be gained from offline-first behavior vs. a more
familiar behavior, i.e. when `embark run` isn't running then Cockpit isn't
accessible.
Step-by-Step
============
Flushing a site's service worker from cache can be tricky. The following steps
outline an approach to making sure the Cockpit in use is the one with service
worker disabled.
1. The first screenshot below shows the JavaScript console from a fresh load of
Cockpit with the service worker enabled, i.e. from a build on `master` at time
of writing and `embark run` running for the `embark_demo`. Note the messages
re: *"workbox"* and *"precaching"*.
![][step-1]
2. The next screenshot shows what happens when `embark run` is stopped and the
browser is refreshed. Service worker makes the page available offline, though
there are errors related to embark's API not being accessible.
![][step-2]
3. (a) Cockpit gets rebuilt on this PR's `refactor/cockpit-service-worker`
branch and `EMBARK_UI_STATIC=t embark run` is started; see [previous
commit][prevcom] re: `EMBARK_UI_STATIC`. (b) The browser is refreshed. Note the
message at the bottom re: *"New content is available"*.
![][step-3]
4. The Chrome browser is closed completely (command-Q), reopened and
`localhost:55555` is loaded again. Note there are *still* messages re:
*"workbox"* and *"precaching"*.
![][step-4]
5. The page is refreshed again and now the messages are completely gone.
![][step-5]
6. `embark run` is stopped and the page is reloaded, but there's a connection
error because no process is listening on `localhost:55555` — proof that
the service worker is no longer in play!
![][step-6]
Steps 3(b) to 6 will need to be repeated for each browser (Firefox, Safari,
etc.) that visited `localhost:55555` when the service worker was enabled. And
they'll need to be repeated again if the browser is later used with a build of
Cockpit predating this PR.
[PWA]: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
[current]: 4d4704ac6f/packages/embark-ui/src/index.js (L39)
[ofb]: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app#offline-first-considerations
[code]: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/serviceWorker.js#L66-L93
[step-1]: https://user-images.githubusercontent.com/194260/54885199-adfa0900-4e47-11e9-830b-1b92816b2354.jpg
[step-2]: https://user-images.githubusercontent.com/194260/54885202-b3575380-4e47-11e9-9c1e-24817472d9c4.jpg
[step-3]: https://user-images.githubusercontent.com/194260/54885209-bb16f800-4e47-11e9-8e23-8fbc3b4f48fa.jpg
[prevcom]: https://github.com/embark-framework/embark/commit/322033cc
[step-4]: https://user-images.githubusercontent.com/194260/54885212-bfdbac00-4e47-11e9-9c8c-db90228d953a.jpg
[step-5]: https://user-images.githubusercontent.com/194260/54885214-c538f680-4e47-11e9-9963-58fd041675f0.jpg
[step-6]: https://user-images.githubusercontent.com/194260/54885217-ccf89b00-4e47-11e9-967a-7f8a523d4a92.jpg
Implement a `/*` server-side catch-all route for Cockpit that loads Cockpit's
`index.html`.
This change is necessary with intent to disable offline-first behavior in
production builds of Cockpit. Cockpit's service worker effectively translates
server-side route unavailability into client-side behaviors of
connected-react-router. When the service worker is unregistered the same will
be accomplished via the server-side catch-all route.
Implement fallback pages for when embark is in the monorepo but Cockpit's
Create React App development server isn't yet started or isn't yet responsive.
Implement a fallback page for when the static build of Cockpit is missing. When
embark is in the monorepo, give instructions for building Cockpit. Otherwise,
report that the distribution is broken.
Deprecate the environment variable `EMBARK_DEVELOPMENT` in favor of
`EMBARK_UI_STATIC`. Unless the latter is truthy at runtime, when embark is in
the monorepo the CRA dev server of Cockpit will be accessible at
`localhost:55555` via proxied requests to `localhost:3000`. The deprecation is
not a breaking change as `EMBARK_DEVELOPMENT` / `EMBARK_UI_STATIC` are not
relevant to normal users, but only to developers working on embark itself.
Bump `express-http-proxy` to the latest version.
If a transaction is sent and the proxy is enabled, but the function hash (identified in the data of the transaction) is not recognized as a function of the contract (ie does not match a function hash in the contract’s ABI), then embark would crash.
The fix was to introduce error handling in `transactionUtils.getTransactionParams` that defaults the contract name and params to `UNKNOWN`.
This can be replicated by
1. Clone https://github.com/mortimr/ethvtx_embark
2. `embark run` the dapp
3. Connect with Metamask
4. Ensure you have enough funds
5. In the “Tx calls” bubble, enter a new value, then click “Set Value”.
6. When the Metamask dialog appears, the error should have already happened. The console shows:
```
embark/src/lib/utils/transactionUtils.ts:58
const functionName = func.functionName;
^
TypeError: Cannot read property 'functionName' of undefined
at functionName (/Users/mortimr/Horyus/ethvtx_embark/node_modules/embark/src/lib/utils/transactionUtils.ts:58:29)
at ConsoleListener.getTransactionParams [as _onIpcLogRequest] (/Users/mortimr/Horyus/ethvtx_embark/node_modules/embark/src/lib/modules/console_listener/index.js:102:41)
at _onIpcLogRequest (/Users/mortimr/Horyus/ethvtx_embark/node_modules/embark/src/lib/modules/console_listener/index.js:76:12)
at Server._done (/Users/mortimr/Horyus/ethvtx_embark/node_modules/embark/src/lib/core/ipc.js:81:7)
at Server.emit (/Users/mortimr/Horyus/ethvtx_embark/node_modules/event-pubsub/es5.js:74:21)
at Server.gotData (/Users/mortimr/Horyus/ethvtx_embark/node_modules/node-ipc/dao/socketServer.js:194:14)
at Socket.emit (events.js:189:13)
at Socket.EventEmitter.emit (domain.js:441:20)
at addChunk (_stream_readable.js:284:12)
at readableAddChunk (_stream_readable.js:261:13)
at Socket.Readable.push (_stream_readable.js:220:10)
at Pipe.onStreamRead [as onread] (internal/stream_base_commons.js:94:17)
```
When a fallback function is encountered give its signature as `function()`,
disable row expansion, and omit the interaction form. Also label with a
`fallback` badge.
Create React App automatically determines the base path for links within
production build artifacts based on the project's `"homepage"` field in
`package.json`.
An [alternative][alt-setting] is to set the `PUBLIC_URL` environment variable
in `.env.production`. Take that approach so embark-ui's `"homepage"` can
continue to point to its home in the monorepo on GitHub.
Generate source maps in the production build of embark-ui. Doing so increases
the size of the package's tarball by a few MB (it was already large because of
the editor component), but the benefits of being able to much more easily debug
a production build (e.g. when interacting with users experiencing problems)
outweigh the size cost.
[alt-setting]: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/paths.js#L36
`"rxjs"` is [preferable][rxjs-pkg-name] in a CommonJS context,
e.g. node. Existing embark code is `require`-ing from the unscoped package
name, which worked in the monorepo because some other dependency specifies
`"rxjs"` and yarn hoists it to the root of the workspace. In a production
install of embark, though, `require('rxjs')` was failing.
[rxjs-pkg-name]: https://github.com/ReactiveX/rxjs/issues/2577
When testing production installs of embark 4.0.0-beta.1 (local registry), the
`restrictPath` mechanism of `core/fs` was too restrictive, interfering with
template generation (cause not completely determined). Also, it's known that
`restrictPath` causes problems when resolving plugins, etc. from "higher up"
`node_modules` paths, e.g. in the monorepo.
Introduce `codeRunner/fs` which uses `restrictPath` as before, and in `core/fs`
remove `restrictPath`. Revise the other `codeRunner` modules to use
`codeRunner/fs`.
Don't implicitly rely on explorer overview having been loaded to initially
populate `entities.transactions`. Also, that container should watch for new
blocks/transactions same as the other explorer containers.
Restore `fetchTransactions` and related to TransactionsContainer. It's no
longer the basis of pagination (it didn't work as desired), but when navigating
through the transaction pages that action will ensure more transactions are
fetched so that the account page will list more of an account's transactions
over time. That was a side effect of `getTransactions` before it was removed in
favor of `getBlocksFull`, which is still the basis of revised pagination logic
in the transactions explorer.
Revise calculations related to transactions and pagination in the transactions
explorer and explorers overview.
Make the number of transactions to display per page configurable and set it to
3 in the explorers overview. Display a "No transactions..." message instead of
"0" when there are no transactions to display.
Introduce a `blocksFull` prop, action, api, etc. for calculating lists of
transactions relative to block objects that contain full transaction objects
instead of hash strings (the function backing the blocks endpoint already
supports that) and transaction receipts. In the future, the receipts can be
used to filter out constructor transactions for silent contracts.
Make pagination display conditional within the blocks explorer, same as in the
transactions explorer.
Filter silent contracts in the views that display contracts lists rather than
with `formatContractForDisplay` because the old approach prevents interaction
with a silent contract if a link to it is followed from the blocks or
transactions explorer, which is not desirable.
Rename contract "Transactions" tab to "Log". Display and allow filtering of all
contract methods. Disable debug button for pure/view functions and the
constructor.
Revise the filtering logic so that filters are combined together. Make the
status filter a drop down menu like the others.
Revise styling for consistent row height, alignment of text, and button sizes;
use a monospaced font in some cases to achieve the effect.
Handle enter/return correctly in forms within a contract's Interact tab.
Remove event rows from a contract's Interact tab.
Track pure/view calls in the blockchain proxy so they can be logged server-side
by console listener and reported in Cockpit within a contract's Log tab.
Eliminate double logging in the contracts manager. Ensure contracts deployed on
a fresh `embark run` have an `address` / `deployedAddress` property.
Revise calculations related to block numbers and pagination in the blocks
explorer and explorers overview.
Make the number of blocks to display per page configurable and set it to 5 in
the explorers overview.
Previously, storage providers in embarkjs were not waiting for their respective storage process (ipfs and swarm) to start before running `registerProvider` and `setProvider` in the console.
This PR forces the `registerProvider` and `setProviders` from running in the console until the storage processes have loaded. As a side effect, the code generation of `EmbarkJS` must wait for the storage module ot be fully initiated (ie once the processes have launched and the `registerProvider` and `setProviders` have been run) before generating the code.
This fixes errors pertaining to `Could not connect to a storage provider using any of the dappConnections in the storage config` as these errors were typically caused by `setProviders` being called before the storage processes had fully launched.
Make changes by running these commands in the root of the monorepo:
**bugs**
```shell
npx lerna exec --concurrency 1 --stream -- \
'DIRPATH=$(realpath $PWD --relative-to=$LERNA_ROOT_PATH); \
npx json -I -f package.json -e "this.bugs=\
\"https://github.com/embark-framework/embark/issues\""'
```
**homepage**
```shell
npx lerna exec --concurrency 1 --stream -- \
'DIRPATH=$(realpath $PWD --relative-to=$LERNA_ROOT_PATH); \
npx json -I -f package.json -e "this.homepage=\
\"https://github.com/embark-framework/embark/tree/master/${DIRPATH}#readme\""'
```
Don't commit changes to private packages, with the exceptions of embark-typings
and embark-reset because those may switch from private to public, and also
because the latter will be included in `node_modules` of embark even if it is
private since embark-reset is presently a bundled dependency of embark.
Don't include the homepage and bugs fields in dapps generated from the template
packages, except for the demo. Set those dapps' description field to an empty
string.
Ensure every package (inc. private packages) has a description.
Ensure every package (inc. private packages) has a README that begins with:
```markdown
`[pkgJson.name]`
================
> [pkgJson.description]
Visit [embark.status.im](https://embark.status.im/) to get started with
[Embark](https://github.com/embark-framework/embark).
```
Don't include the README in dapps generated from the template packages, except
for the demo.
Prevent embark from crashing when app assets are not specified in `embark.json`.
Previously, if the `app` property of `embark.json` was missing, embark would crash with the error `TypeError: Cannot convert undefined or null to object`.
With this PR, the missing property is null-checked.
Michael Bradley, Jr
emizzle
Iulian Rotaru (mortimr)
Pascal Precht
Iuri Matias
Andre Medeiros
Jonathan Rainville
