Set up an Ethereum Project using SvelteKit with Tailwind CSS and Hardhat
We'll start our project by installing all of the necessary tools to get started with Web3 development.
This project will use SvelteKit Tailwind CSS for it's UI. We have some handy initializers that we will run to do the configuration for us.
On the Web3 side of things we will use Hardhat, Ethers.js, and hardhat-waffle for smart contract development.
Instructor: [0:00] Let's start this project with a little bit of setup. The first thing that you'll need to set up and configure is the SvelteKit application. This will be the entire scaffold of your project. [0:12] To start, let's run this tiny script in your console. Tipjar is the name of the folder. Let's answer these questions with proceed and choose skeleton project. You won't use TypeScript for this course, but you will want to add ESLint and Prettier.
[0:30] Next, you'll want to add some styling tools. In this case, you'll use Tailwind. To add Tailwind to the mix, you'll use an adder. This is a utility package that you can run directly in your terminal. Let's copy this little piece of code in the console. This will configure everything you need to run Tailwind into your SvelteKit application. You'll need to wait for the dependencies to be installed.
[0:57] Now, let's install the development environment of choice for this course. This is Hardhat. It will set up an Ethereum development environment, allowing you to run a local blockchain. Go ahead and copy this little snippet to install the requirements. This will install ethers, a library to communicate with the smart contract, Hardhat, and some dependencies that will be used to test your smart contract.
[1:26] After the installation process is done, it's time to set up the environment. Run npx hardhat and answer the question by creating an empty Hardhat config file, and then you're done.
[1:42] You need to create a few folders for this configuration to work. Let's start by creating a script folder. Let's also create a contract folder under src/contracts. Here is where the contract will live, and lastly, the test folder to store your tests.
[2:02] Let's open your code editor and modify the Hardhat config file. Open the file first. Then, you'll need to import the Waffle framework. Require the Hardhat Waffle package. This allows the testing environment to be loaded with Hardhat. Let's bump the Solidity version to at least .8.4.
[2:27] It's time to add some configuration to it. The first configuration is to add the path to allow Hardhat to find certain content. Let's write paths and set up the artifacts. This is where the artifacts will be stored after the smart contract compilation. The sources where the contracts will be stored can be found in src/contracts.
[2:52] Finally, let's set up the network's configuration. This will load Hardhat to connect to a local chain network. You'll set the chain id to 1337.
[3:01] The last step to make all of this configuration work is to add an empty package.json file. This is because SvelteKit is an ES module package, and you need to make CommonJS play well with it.