create-treble-app
Advanced tools
Boilerplate for a project requiring Treble Frontend + Deployment
git clone git@github.com:Threekit/%REPO_NAME%.git
cd %REPO_NAME%
.env.template file. Rename the file to .env.yarn installyarn start.Deployments are managed by Github actions tied to the repository and are triggered by a push event on the various branches.
Pushing to the prod branch will trigger the production deployment pipeline with the updated code. By default it will use the admin-fts environment on Threekit.
Pushing to the dev or staging branches will trigger the development deployment pipeline with the updated code. By default it will use the preview environment on Threekit. Since the dev deployment has many front-end instances deployed to the same hosted endpoint, we have to append the branch we wish to view to the end of the url. For example:
staging branch: https://%PROJECT_NAME%.dev.3kit.com/stagingdev branch: https://%PROJECT_NAME%.dev.3kit.com/devTo install the project dependencies we run:
yarn init
To start the local development server we run
yarn start
By default this uses the preview environment on Threekit. We can also explicitly specify the environment we wish to use by adding it as a flag:
yarn start --admin-fts
The build commands works similar to the start command. If defaults to preview but we can specify an override if we want.
Note: The deployment build will be handled automatically by the Github Action.
yarn build --preview
To embed the hosted App in any existing web-page or eCommerce setup we will need to add two things into the HTML content of that page. The set of HTML elements we want to embed out UI into and the script tag to request our React UI bundle.
Set of HTML Elements
Most often we embedding our App into a single HTML div, which only requires us to add that one div into the HTML page we plan to embed into. By default we expect this single div to have the id tk-treble-root, as specified in the public/index.html file and src/index.js file. However, this can be changed as per project needs.
<div id="tk-treble-root"></div>
If our App is being embedded across multiple HTML containers, e.g. one for the player and another for the form, we add a div for each of them and ensure that the id given matches what our UI expects.
Embed Script
We add a script tag to request our built React app bundle from our production server. The bundle is located at /threekit-embed.js.
<script src="https://%PROJECT_NAME%.3kit.com/threekit-embed.js"></script>
To embed one of our development environments we have to update the URL accordingly:
<script src="https://%PROJECT_NAME%.dev.3kit.com/staging/threekit-embed.js"></script>
Example - Embed Snippet
<body>
<div id="threekit-player-container"></div>
<div id="threekit-form-container"></div>
<script src="https://%PROJECT_NAME%.3kit.com/threekit-embed.js"></script>
</body>
For information on using Treble to build a web experience visit the Treble React Github repository.
FAQs
**A quick way to bootstrap a new Threekit Treble project**
The npm package create-treble-app receives a total of 2 weekly downloads. As such, create-treble-app popularity was classified as not popular.
We found that create-treble-app demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.