{"id":13722291,"url":"https://github.com/antony/svelte-box","last_synced_at":"2025-03-16T12:31:54.473Z","repository":{"id":25433388,"uuid":"101647042","full_name":"antony/svelte-box","owner":"antony","description":"A truffle box for svelte","archived":false,"fork":false,"pushed_at":"2023-01-23T21:55:51.000Z","size":2655,"stargazers_count":62,"open_issues_count":23,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T12:48:23.485Z","etag":null,"topics":["blockchain","cryptocurrency","dapp","ethereum","ethereum-dapp","metamask","parcel","parcel-bundler","parceljs","rollup","seed","smart-contract","svelte","svelte-components","sveltejs","testrpc","truffle","truffle-boilerplates","truffle-box","truffle-framework"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antony.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-28T13:40:50.000Z","updated_at":"2024-05-09T22:07:22.000Z","dependencies_parsed_at":"2023-02-13T03:46:05.454Z","dependency_job_id":null,"html_url":"https://github.com/antony/svelte-box","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antony%2Fsvelte-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antony%2Fsvelte-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antony%2Fsvelte-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antony%2Fsvelte-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antony","download_url":"https://codeload.github.com/antony/svelte-box/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221663542,"owners_count":16859840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","cryptocurrency","dapp","ethereum","ethereum-dapp","metamask","parcel","parcel-bundler","parceljs","rollup","seed","smart-contract","svelte","svelte-components","sveltejs","testrpc","truffle","truffle-boilerplates","truffle-box","truffle-framework"],"created_at":"2024-08-03T01:01:26.922Z","updated_at":"2024-10-27T10:33:05.915Z","avatar_url":"https://github.com/antony.png","language":"JavaScript","funding_links":[],"categories":["templates"],"sub_categories":["editor tools"],"readme":"![box-img-lg-template](https://user-images.githubusercontent.com/218949/63261050-6ce11600-c27a-11e9-9355-1ee226b4497c.png)\n\n## SvelteJS Truffle Box\n\nA Truffle box using [SvelteJS](https://svelte.technology/) and [Rollup](https://rollupjs.org/).\n\nThis box contains everything you need to start building a smart-contract app.\n\n### Project Goal\n\nTo provide the simplest, cleanest seed for building an Ethereum dapp using [Truffle](http://truffleframework.com/), with the minimum possible dependencies, meaning that beginners and pros a like have the most transparent possible method for developing [Ethereum](https://www.ethereum.org/) contracts.\n\n### Truffle Box\n\nA [truffle box](http://truffleframework.com/boxes/) is a seed project for building a truffle dapp.\n\n### Why Svelte?\n\n[Svelte](https://svelte.technology) was chosen as it is a rich, state-model based, ES6, component framework with very few dependencies, which is nothing more than html, javascript, and css. Once compiled via svelte, there are no clientside dependencies at all - simply vanilla JS.\n\n[Svelte](https://svelte.technology) is basically a simple DSL (domain specific language) for building a reactive, stateful, dependency-free web-application in pure javascript.\n\nAdditionally, the [Svelte](https://svelte.technology) API is so simple and well-designed, you can learn the whole thing from scratch in less than an hour!\n\n### Why Rollup?\n\nOriginally this project used ParcelJS but sadly Parcel's support for Svelte is currently broken, and has been for a while. I've switched to RollupJS in order to upgrade to Svelte 3.\n\nCurrently, we load web3 from UNPKG, since it appears to be borderline impossible to bundle successfully. If anybody wants to open a PR to bundle Web3, it would be greatly appreciated.\n\n## Setting up\n\n1. Install truffle and an ethereum client. For local development, try Ethereum TestRPC.\n    ```javascript\n    npm install -g truffle // Version 3.0.5+ required.\n    npm install -g ganache-cli // Or the ganache GUI will work too.\n    ```\n\n2. Download box.\n    ```javascript\n    truffle unbox antony/svelte-box\n    ```\n\n4. Run an Ethereum RPC. For simplicity and development we will be using Ethereum TestRPC.\n    ```javascript\n    ganache-cli\n    ```\n\n7. Compile and migrate the contracts after authenticating your account on the blockchain (i.e. restoring from seed in MetaMask).\n    ```javascript\n    truffle compile\n    truffle migrate\n    ```\n\nYou're ready to go!\n\n## Usage\n\nComponents are in `src/components/*.html`. Everything else is in the usual place [according to the docs](https://github.com/trufflesuite/truffle-init-default)\n\nRun the testrpc so that you have a blockchain to work with, and deploy your contracts:\n\n```bash\ntestrpc\ntruffle deploy\n```\n\nLog in to metamask by importing the HD Wallet that testrpc gave you, and do the same for one of the accounts by entering its private key. Then, run the dev task to have the code updated in realtime as you develop:\n\n```bash\ntruffle compile\nnpm run dev\n```\n\n## Publishing\n\nTo produce your production dApp, run the build task:\n\n```bash\nnpm run build\n```\n\nThis will publish your completed dApp to the folder `./dist`\n\n## Testing\n\nTesting works much the same way as it does in any web-application, with an additional `truffle test` command for testing smart contracts.\n\nBe sure you've compiled your contracts before running the tests, or you'll get file not found errors.\n\n    ```javascript\n    npm run test:unit // for dApp tests\n    npm run test:contract // for contract tests\n    ```\n\n## Releasing\n\nTo build the application for production, use the build command. A production build will be in the `./dist` folder.\n\n    ```javascript\n    npm run build\n    ```\n\n## FAQ\n\n* __Why is there both a truffle.js file and a truffle-config.js file?__\n\n    Truffle requires the truffle.js file be named truffle-config on Windows machines. Feel free to delete the file that doesn't correspond to your platform.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantony%2Fsvelte-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantony%2Fsvelte-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantony%2Fsvelte-box/lists"}