This is a cart example using svelte and tailwind, this sample code give an overview on how to use the library to create a DApp, ethers library was used to create a DApp.
Clone the repository and run.
git clone https://github.com/stevepabatao/shopping-cart.git
cd <to the directory>
npm install
npm run devNote that you will need to have Node.js installed.
Create the project and install
npx degit sveltejs/template shopping-cart
cd <project_name>
npm installnpm install tailwindcss postcss autoprefixer svelte-preprocess postcss-load-configMake tailwind and post css config files.
npx tailwindcss init -pwill create tailwind.config.js postcss.config.js
Add to rollup.config.js plusgins section
Import the sveltePreprocess
import sveltePreprocess from 'svelte-preprocess';preprocess: sveltePreprocess({
sourceMap: !production,
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
}),Add this to the App or create a seperate file and import it.
<style global lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>npm run devNavigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.
If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
To create an optimised version of the app:
npm run buildYou can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku and Netlify.
Clone the hackathon-boilerplate-project sample on hardhat follow the instructions here.
https://hardhat.org/tutorial/hackathon-boilerplate-project.htmlIn this example you deploy and run a contract using the hardhat network
Run the hardhat network
cd hardhat-hackathon-boilerplate/
npx hardhat nodeDeploy the smart contract
npx hardhat --network localhost run scripts/deploy.jsYou can get eth from the hardhat faucet for testing.
ex.
$ npx hardhat --network localhost faucet 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90
Transferred 1 ETH and 100 tokens to 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90Svelte by default does not support json and you will show errors if not configured. You need to activate json on rollup to run the application.
Open rollup.config.js and insert the line inside the plugins section
plugins: [
---- some config here ----
json(),
---- some config here ----
]To deploy using hardhat, update the hardhat.config.js and add the following.
require("@nomiclabs/hardhat-waffle");
require("./tasks/faucet");
const ALCHEMY_API_KEY = "<ALCHEMY_KEYS>";
const ROPSTEN_PRIVATE_KEY = "<ROPSTEIN_PRIVATE_KEY>";
module.exports = {
solidity: "0.7.3",
networks: {
ropsten: {
url: `https://eth-ropsten.alchemyapi.io/v2/${ALCHEMY_API_KEY}`,
accounts: [`0x${ROPSTEN_PRIVATE_KEY}`]
}
}
};Deploy the smart contract on the ropsten network
npx hardhat run scripts/deploy.js --network ropstenSample app running on netlify.
[https://pensive-meninsky-b81ade.netlify.app](https://pensive-meninsky-b81ade.netlify.app/)