Dfinity Internet Computer Static Website example using (Bootstrap, jQuery and Font-Awesome) via CDN
Open a separate window/shell to start your local dev with express
npm install
npm start
Open browser at http://localhost:3000
Open a separate window/shell to start your local chain
dfx start
In a different window build/deploy the Website Canister
dfx deploy
Example Output:
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "YYYYY-YYYYY-YYYYY-YYYYY-YYY"
Deploying all canisters.
Creating canisters...
Creating canister "website"...
"website" canister created with canister id: "<CANISTER-ID>"
Building canisters...
Installing canisters...
Creating UI canister on the local network.
The UI canister on the "local" network is "XXXXX-XXXXX-XXXXX-XXXXX-XXX"
Installing code for canister website, with canister_id XXXXX-XXXXX-XXXXX-XXXXX-XXX
Uploading assets to asset canister...
Starting batch.
Staging contents of new and changed assets:
/index.html 1/1 (2353 bytes)
/index.html (gzip) 1/1 (1001 bytes)
Committing batch.
Deployed canisters.
Now, open the file .dfx/local/canister_ids.json
and get your canister id website.local
and add it to the url below
Open browser at http://localhost:3000?canisterId=<CANISTER-ID>
Left side is IC Website Canister with missing Background image (relative path to local image) and the right side is the local Express server with working Background image (relative path to local image). Identical Code
So, if you are getting 400 -Bad Request
errors ...
Do not use: http://localhost:3000?canisterId=<CANISTER-ID>
Instead always use: http://rrkah-fqaaa-aaaaa-aaaaq-cai.localhost:8000
Seems silly, it is also annoying and I think they should apply a fix for this. But for now, this is the fix.
Me, Andrew Donelson, Discord -> GWF-Founder#5282