This is a
@deity/falcon-client host for your application.
Falcon Client is the entrypoint for frontend features of Falcon stack. It acts as host for your project - provides app building capabilities and features set which can be used to create your desired shop application.
Use the project generator:
Out of the box, it connects to a public back-end service (Magento & WordPress), so you can start developing right away.
Falcon Client exposes set of handy commands:
Runs the project in development mode. You can view your application at
The page will reload if you make edits (both backend and frontend HMR is enabled).
To debug the node server, you can use
falcon-client start --inspect. This will start the node server and enable the inspector agent. The
=[host:port] is optional and defaults to
=127.0.0.1:9229. For more information, see this.
This is the same as --inspect, but will also break before user code starts. (to give a debugger time to attach before early code runs) For more information, see this.
If your application is running, and you need to manually restart your server, you do not need to completely kill and rebundle your application. Instead you can just type
rs and press enter in terminal.
Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
If you want to know more about how to test, see this
Builds the app for production, and outputs to the
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
Runs an interactive zoomable treemap of output files to visualize their size. Report will be automatically open in default browser at
Falcon Dynamic Routing
Falcon client offers wide range of Progressive Web App features out of the box
The web app manifest provides information about an application (such as its name, author, icon, and description) in a JSON text file. The manifest informs details for websites installed on the homescreen of a device, providing users with quicker access and a richer experience.
For more information, see this.
Web App Manifest file should be located in
./src/manifest.webmanifest and could be edited according to your needs. Pleas bear in mind that paths to icons files should be relative:
During build process webpack will take care about resolving file paths and generating hashes in order to improve file caching.
All files emitted by webpack build into
./build/public/static/ directory contain hash part in file name, which is generated from its content. It allow us to set browser cache via setting
Cache-Control: max-age=31536000 header, which is 1 year.
Production build generate Service Worker (file
./build/static/sw.js) which is automatically installed in web browser. It cache all files from
./build/public/ and turns on offline capabilities.
For more information see this
To make your shop SEO-friendly, following mechanisms are involved out of the box
Server Side Rendering
Dynamic meta description
Page title and other meta tags can be dynamically changed directly in
jsx in any place of your page. It is achieved via react-helmet.
To change page title or add any kind of meta tag (e.g. Open Graph Protocol) you need to wrap them by
<Helmet /> component:
For more examples see this
Google Tag Manager
you can configure Google Tag Manager via
config property in
id: string: (default
null) Google Tag Manager ID
falcon-client provides out of the box support for
scss, and you should write them in
*.scss files accordingly.
However, css modules convention is also supported see the details. To make it work you need to add
module prefix to the file extension. For example, vanilla css with modules should be located in
*.module.css, and scss with modules in
Internal Server Error page
falcon-client provide default error page for http 500 error. You can override it and provide your own by placing
500.http file in
FalconClientMock component which allows you to setup application context inside unit test environment.
FalconClientMock can receive props for mock version of React context provider components used by
apollo: object- props for
router: objectprops for
asyncComponent: object- props for
i18next: object- props for
example unit test with