To learn more before you start working with findeck.io, see the following
documentation available online:
It's worth taking the time to review this documentation to get an overview of the core development tool used called DFX.
dfx.dfxvm.The group building this project can be reached here on the FindeckDao OpenChat.
Following the next two steps makes it easier to interact with the rest of the group. Because it helps us all to understand that work is being done, we encourage everyone to share updates on completed work gets posted in our chat.
NOTE: These notes assume MacOS as the development environment. If you want to develop on a different platform please share notes on how to do it for others here once you understand the process.
Please be sure git is installed.
brew install gitCheck to be sure nvm is installed correctly.
git --versionYou should see a value equal to or greater than git version 2.46.0.
Please install node version manager.
brew install nvmCheck to be sure nvm is installed correctly.
nvm --versionYou should see a value equal to or greater than 0.40.0.
If you see the message “command not found: nvm”, please follow the instructions and return to this step.
Please install the latest stable version of NodeJS.
nvm install stableCheck to be sure NodeJS is installed correctly.
node --versionYou should see a value equal to or greater than v22.6.0.
Please install motoko development server globally. If you need more information, here are some docs related the motoko development server.
npm install -g mo-devCheck to be sure mo-de is installed correctly.
mo-dev --versionYou should see a value equal to or greater than mo-dev 0.13.0.
Clone this repository to a directory on your local machine (usually ~/Repos).
cd ~/Repos
git clone git@github.com:FinDeckDao/findeck.io.gitConfirm this was done correctly buy entering the repository.
cd findeck.io
ls -alhYou should see a listing that contains a file named package.json.
Run the dependency installer.
npm installConfirm this was completed successfully.
npm lsYou should see a tree output that looks something like this.
findeck.io@ /Users/<YourUserName>/Repos/findeck.io
├── @testing-library/user-event@14.5.2 extraneous
├── async@3.2.5 extraneous
...
├─┬ frontend@0.0.0 -> ./src/frontend
│ ├── @dfinity/agent@1.4.0
...~/Repos/findeck.io) start up the canister environment.
This environment is similar to a docker container (but it is not powered by docker).The following command runs the script called "dfx" inside of package.json.
npm run dfxIf you see the message “command not found: dfx”, install the dfx using following command and close the shell:
sh -ci "$(curl -fsSL https://smartcontracts.org/install.sh)"Confirm this went correctly by checking the output. You should end up with something that looks like this. But the port number will likely be different.
npm run dfx
> dfx
> dfx start --clean --host 127.0.0.1:8000
Running dfx start for version 0.20.1
Using project-specific network 'local' defined in /Users/jfgrissom/Repos/findeck.io/dfx.json
Initialized replica.
Dashboard: http://localhost:52554/_/dashboardGot to the dashboard (in the above example http://localhost:52554/_/dashboard) and you should see a webpage that looks like a basic dashboard has an empty area for running canisters.
~/Repos/findeck.io) deploy the containers.npm run deployYou can check to be sure this deployed correctly by checking the dashboard (http://localhost:53418/_/dashboard) and you'll see canisters have been deployed.
Additionally you'll see http addresses for your canisters in the output that looks similar to this.
Frontend canister via browser
frontend:
- http://127.0.0.1:8000/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai
- http://bd3sg-teaaa-aaaaa-qaaba-cai.localhost:8000/
internet_identity:
- http://127.0.0.1:8000/?canisterId=be2us-64aaa-aaaaa-qaabq-cai
- http://be2us-64aaa-aaaaa-qaabq-cai.localhost:8000/
Backend canister via Candid interface:
backend: http://127.0.0.1:8000/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
internet_identity: http://127.0.0.1:8000/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=be2us-64aaa-aaaaa-qaabq-cai
xrc: http://127.0.0.1:8000/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=br5f7-7uaaa-aaaaa-qaaca-caiIf you can see the frontend in a browser using either of the two frontend addresses then you are all set to do local development.
To make changes quickly you need to start some additional watchers to compile your changes quickly once you save files.
npm run dev:backend.npm run dev:frontendAt this point you should have 3 terminals open.
http://localhost:53418/_/dashboard).[mo-dev] deploy backend on the command line).git checkout -b feature/your-feature-name.npm run deploy.git push.A searchable index is being created every time you run npm run start.
There is a large list of assets a user could chose from so this gets pre-index.
When changes are made to src/frontend/src/lib/icons/coins.json you can run it manually with npm run generate-index.
If you have made changes to your backend canister, you can generate a new candid interface with
npm run generateat 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
npm startWhich will start a server at http://localhost:8080, proxying API requests to
the replica at port 4943.
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:
DFX_NETWORK to ic if you are using Webpackprocess.env.DFX_NETWORK in the
autogenerated declarations
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 declarationscreateActor constructor