CSS & JavaScript
How to handle assets for use in a web browser
Browser assets are stored in two distinct folders, based on whether these assets require processing or not.
Static Assets
Any assets that do not require processing (e.g., fonts, robots.txt, icons) should be placed in the /public
directory. They will be served as static files from the root directory.
Route path | URL |
---|---|
public/robots.txt | /robots.txt |
public/fonts/ubuntu.woff2 | /fonts/ubuntu.woff2 |
CSS & JavaScript
CSS, JavaScript, or TypeScript files that require processing and minification should be stored in the src/browser directory and must be named as index.[css|js|jsx|ts|tsx]
. Only index files serve as bundle entries and are accessible to the client. This approach offers flexibility in creating a custom directory layout.
Route path | URL |
---|---|
browser/src/index.css | /index.css |
browser/src/custom/index.js | /custom/index.js |
browser/src/utils/date.js | This file will be not available via an url. |
Shared code
While you have the flexibility to share code between the server and browser, this is typically an edge case, as the DOM is not relevant on the server side, and node core modules are not compatible with the browser. To optimize build performance during development by efficiently minimizing unnecessary rebuilds, no rebuild is triggered when shared code changes per default. You can easily configure additional paths which should be watched for building the browser bundles via an environment variable:JEASX_BUILD_JS_WATCH="src/browser,src/shared"