https://github.com/ezzeddinp/web3-boilerplate
https://github.com/ezzeddinp/web3-boilerplate
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ezzeddinp/web3-boilerplate
- Owner: ezzeddinp
- Created: 2024-10-20T05:18:18.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-11-05T14:07:25.000Z (7 months ago)
- Last Synced: 2025-02-02T06:41:37.422Z (4 months ago)
- Language: TypeScript
- Size: 114 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web3 with Internet Computer - Boilerplate
### Language that were use:
#### - Frontend = ReactJS -> Vite
#### - Backend = Motoko -> Canisters (Smart Contracts)
Welcome to your new `hello` project and to the Internet Computer development community. By default, creating a new project adds this README and some template files to your project directory. You can edit these template files to customize your project and to include your own code to speed up the development cycle.
### Attention!, You have to change your powershell into Wsl BEFORE CLONE THE PROJECT by commands:
```bash
wsl
### Then:
git clone https://github.com/ezzeddinp/web3-boilerplate
```
## *These project already added:
### - Tailwindcss (UI)
To get started, you might want to explore the project directory structure and the default configuration file. Working with this project in your development environment will not affect any production deployment or identity tokens.
To learn more before you start working with `hello`, see the following documentation available online:
- [Quick Start](https://internetcomputer.org/docs/current/developer-docs/setup/deploy-locally)
- [SDK Developer Tools](https://internetcomputer.org/docs/current/developer-docs/setup/install)
- [Motoko Programming Language Guide](https://internetcomputer.org/docs/current/motoko/main/motoko)
- [Motoko Language Quick Reference](https://internetcomputer.org/docs/current/motoko/main/language-manual)
First thing you have to do to start working on your project right away, you might want to try the following commands:
## Backend Phase:
```bash
cd hello/
### You have to start the backend engine to be able to deploy the canisters by commands:
dfx start
### After that deploy it (* remember to always redeploy whenever you make a changes in your motoko file!):
dfx deploy
### Then look your terminal to see the url of your local frontend & backend web page
### Options:
dfx help
dfx canister --help
```
## Frontend Phase
#### Make sure you install again your npm in Wsl
```bash
### change directory to front_end by commands
cd src/hello_frontend -> output will be "root@zeddin:~/icp2024/hello/src/hello_frontend#"
### starting with installation of all the dependencies (always to do that after you clone these project):
npm install
### then run it by
npm start
```
## Running the project locally
If you want to test your project locally, you can use the following commands (Actually these works for hello_backend but, it still works even if only in hello directory):
```bash
# Starts the replica, running in the background
dfx start --background
# Deploys your canisters to the replica and generates your candid interface
dfx deploy
```
Once the job completes, your application will be available at `http://localhost:4943?canisterId={asset_canister_id}`.
If you have made changes to your backend canister, you can generate a new candid interface with
```bash
npm run generate
```
at any time. This is recommended before starting the frontend development server, and will be run automatically any time you run `dfx deploy`.
If you are making frontend changes, you can start a development server with
```bash
npm start
```
Which will start a server at `http://localhost:8080`, proxying API requests to the replica at port 4943.
### Note on frontend environment variables
If you are hosting frontend code somewhere without using DFX, you may need to make one of the following adjustments to ensure your project does not fetch the root key in production:
- set`DFX_NETWORK` to `ic` if you are using Webpack
- use your own preferred method to replace `process.env.DFX_NETWORK` in the autogenerated declarations
- Setting `canisters -> {asset_canister_id} -> declarations -> env_override to a string` in `dfx.json` will replace `process.env.DFX_NETWORK` with the string in the autogenerated declarations
- Write your own `createActor` constructor