Skip to content

Commit

Permalink
Merge pull request #951 from dfinity/fix-svelte-readmes
Browse files Browse the repository at this point in the history 
revise: Svelte example READMEs
  • Loading branch information
@jessiemongeon1
jessiemongeon1 authored Aug 16, 2024
2 parents 1a0ce6c + 720578e commit bfabc84
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 74 deletions.
85 changes: 42 additions & 43 deletions svelte/svelte-motoko-starter/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,55 @@
# Svelte Dapp with Motoko & Internet Identity
# Svelte Motoko example

This repository is meant to give [Svelte](https://svelte.dev/) developers an easy on-ramp to get started with developing decentralized applications (Dapps in short) for the Internet Computer blockchain. Dapps, also known as smart contracts are specialized software that run on a blockchain.
[View this sample's code on GitHub](https://github.com/dfinity/examples/tree/master/svelte/svelte-motoko-starter)

This template contains
This repository is meant to give [Svelte](https://svelte.dev/) developers an easy on-ramp to get started with developing decentralized applications (Dapps in short) for ICP. Dapps, also known as smart contracts, are specialized software that runs on a blockchain.

- a Svelte frontend app under `src/frontend` to be hosted on-chain, with support for authentication using Internet Identity
- a Motoko dapp under `src/backend` to serve as a backend to the Svelte frontend
This template contains:

- A Svelte frontend app under `src/frontend` to be hosted on-chain, with support for authentication using Internet Identity.
- A Motoko dapp under `src/backend` to serve as a backend to the Svelte frontend.

You can see a deployed version of this template here: https://zixfv-4yaaa-aaaam-aaatq-cai.ic0.app/

### What is the Internet Computer?

The Internet Computer is a novel blockchain that has the unique capability to serve web content while not requiring the end users to use a browser extension, such as Metamask.
The Internet Computer (ICP) is a novel blockchain that has the unique capability to serve web content while not requiring the end users to use a browser extension, such as Metamask.

Coupled with super fast execution the Internet Computer provides the worlds first truly user friendly Web 3.0 experience.
Coupled with super-fast execution, ICP provides the world's first truly user-friendly Web 3.0 experience.

### What are canisters?

Dapps on the Internet Computer live in canisters, which are special smart contracts that run WebAssembly, and can respond to regular HTTP requests, among other capabilities.

This repository uses Svelte for the frontend running in the browser, and the backend dapp is written in Motoko, it serves as the business logic of your dapp.
Dapps on ICP live in canisters, which are special smart contracts that run WebAssembly, and can respond to regular HTTP requests, among other capabilities.

You will build and deploy the following _canisters_:
This repository uses the following canisters:

- `backend` that is written in Motoko, and will hold the business logic of your dapp.
- `frontend` that is your regular Svelte app, transferred into a `frontend asset` canister.
- `internet_identity` that this repository uses as an authentication provider. It is written in Rust.
- `backend`: Written in Motoko and will hold the business logic of your dapp.
- `frontend`: The Svelte app, uploaded into a `frontend asset` canister.
- `internet_identity`: An authentication provider written in Rust.

### What is Motoko?

Motoko is a new language designed for the Internet Computer. Easy to learn for JavaScript and Solidity developers. Created by the Motoko team at the DFINITY Foundation, led by WebAssembly co-creator Andreas Rossberg. To learn more about the language, check out the [SDK](https://internetcomputer.org/docs/current/motoko/main/motoko).
Motoko is a new language designed for the Internet Computer. It is easy to learn for JavaScript and Solidity developers. It was created by the Motoko team at the DFINITY Foundation, led by WebAssembly co-creator Andreas Rossberg. To learn more about the language, check out the [documentation](https://internetcomputer.org/docs/current/motoko/main/motoko).

### What is Internet Identity?

This starter template also includes integration with Internet Identity. Internet Identity is a new authentication framework similar to Github or Google login, but providing complete anonimity to the users. To learn more about Internet Identity check out the [documentation](https://wiki.internetcomputer.org/wiki/What_is_Internet_Identity).
This starter template also includes integration with Internet Identity. Internet Identity is a new authentication framework similar to Github or Google login, but providing complete anonymity to the users. To learn more about Internet Identity check out the [documentation](https://wiki.internetcomputer.org/wiki/What_is_Internet_Identity).

## Security Considerations and Security Best Practices
## Security considerations and best practices

If you base your application on this example, we recommend you familiarize yourself with and adhere to the [Security Best Practices](https://internetcomputer.org/docs/current/references/security/) for developing on the Internet Computer. This example may not implement all the best practices.
If you base your application on this example, we recommend you familiarize yourself with and adhere to the [Security Best Practices](https://internetcomputer.org/docs/current/references/security/) for developing on ICP. This example may not implement all the best practices.

For example, the following aspects are particularly relevant for creating frontends:
* [Use a well-audited authentication service and client side IC libraries](https://internetcomputer.org/docs/current/references/security/web-app-development-security-best-practices#use-a-well-audited-authentication-service-and-client-side-ic-libraries)
* [Define security headers including a Content Security Policy (CSP)](https://internetcomputer.org/docs/current/references/security/web-app-development-security-best-practices#define-security-headers-including-a-content-security-policy-csp)
* [Don’t load JavaScript (and other assets) from untrusted domains](https://internetcomputer.org/docs/current/references/security/web-app-development-security-best-practices#dont-load-javascript-and-other-assets-from-untrusted-domains)
* [Use a well-audited authentication service and client-side IC libraries](https://internetcomputer.org/docs/current/references/security/web-app-development-security-best-practices#use-a-well-audited-authentication-service-and-client-side-ic-libraries).
* [Define security headers, including a Content Security Policy (CSP)](https://internetcomputer.org/docs/current/references/security/web-app-development-security-best-practices#define-security-headers-including-a-content-security-policy-csp).
* [Don’t load JavaScript (and other assets) from untrusted domains](https://internetcomputer.org/docs/current/references/security/web-app-development-security-best-practices#dont-load-javascript-and-other-assets-from-untrusted-domains).


## Install dependencies

Make sure you have [node.js](https://nodejs.org/) installed.

### How to get this template
### Clone this template

To clone this template without downloading the entire repository, run the following command:

Expand Down Expand Up @@ -76,13 +77,13 @@ rustup target add wasm32-unknown-unknown

## Start the local replica

Open a new terminal window _in the project directory_, and run the following command to start the local replica. The replica will not start unless `dfx.json` exists in the current directory.
Open a new terminal window in the project directory, and run the following command to start the local replica. The replica will not start unless `dfx.json` exists in the current directory.

```
dfx start --background
```

When you're done with development, or you're switching to a different dfx project, running
When you're done with development or switching to a different dfx project, run:

```
dfx stop
Expand Down Expand Up @@ -110,25 +111,25 @@ II_FETCH_ROOT_KEY=1 dfx deploy --no-wallet --argument '(null)'

This will take several minutes to complete.

## Build & run the dapp
## Build and run the dapp

Make sure you switch back to the project root directory.

First, install the frontend dependencies by running
First, install the frontend dependencies by running:

```
cd src/frontend
npm install
cd ..
```

To build and deploy the project run
To build and deploy the project:

```
dfx deploy
```

When the process completes you'll have a backend and a frontend canister running locally. To find the frontend canister's ID, run
When the process completes you'll have a backend and a frontend canister running locally. To find the frontend canister's ID, run:

```
dfx canister id frontend
Expand All @@ -138,13 +139,13 @@ It will output something similar to `rno2w-sqaaa-aaaaa-aaacq-cai`. Copy this ID

## Local development

During local development you will be building and deploying the Motoko backend to the local replica. Building the backend will generate so called declaration files, that are Candid and JavaScript files helping the frontend communicate to the back end.
During local development you will be building and deploying the Motoko backend to the local replica. Building the backend will generate declaration files that are Candid and JavaScript files helping the frontend communicate to the backend.

### Motoko back end
### Motoko backend

If you're using Visual Studio Code it is recommended to use the [Motoko extension](https://marketplace.visualstudio.com/items?itemName=dfinity-foundation.vscode-motoko) developed by the DFINITY Foundation.

To build the backend canister and regenerate the Candid interface declaration files for the frontend run
To build the backend canister and regenerate the Candid interface declaration files for the frontend run the command:

```
dfx build backend
Expand All @@ -160,36 +161,34 @@ For more options and other commands see the [dfx CLI reference](https://internet

### Svelte frontend

You can serve the frontend in development mode like you normally develop a svelte app using the command
You can serve the frontend in development mode like you normally develop a Svelte app using the command:

```
npm run dev
```

from the project root directory, it is not necessary to deploy it to the frontend canister during development.

## Deploying to the IC
## Deploying to the mainnet

To host the frontend and backend on the IC, you'll need to have some cycles available. Cycles pay for the execution of your app, and they are also needed to create canisters.
To host the Svelte app on ICP, you'll need to have some cycles available. Cycles pay for the execution of your app, and they are also needed to create canisters.

You can get $20 worth of cycles for free from the Cycles Faucet, if you have a GitHub account. To claim them, follow [this guide](https://internetcomputer.org/docs/current/developer-docs/setup/cycles/cycles-faucet).
You can get cycles for free from the cycles faucet. To claim them, follow [this guide](https://internetcomputer.org/docs/current/developer-docs/setup/cycles/cycles-faucet).

You should have a canister running the cycles wallet on the IC at this point. The cycles wallet makes it easy to pay for canister creation.

You can check the balance by running
After following that guide, you should have a balance of cycles to use. You can check the balance by running:

```
dfx wallet --network ic balance
```

After making sure you have cycles available you can run
After making sure you have cycles available, you can run

```
dfx deploy --network ic
```

The command will build the project, create two new canisters on the IC and deploy both the Svelte and Motoko dapps. The command will also create a new file `canister_ids.json` which will help the dfx tool deploy to the same canisters in future updates. You can commit this file in your repository.
The command will build the project, create a new canister on ICP and deploy the Svelte app into it. The command will also create a new file `canister_ids.json` which will help the dfx tool deploy to the same canister in future updates. You can commit this file in your repository.

You can now open your Svelte app running on-chain. You can find the canister ID in the deploy command output, or use the ID in `canister_ids.json`.

You can now open your Svelte app running on the IC. You can find the canister ID in the deploy command output, or use the `frontend` ID in `canister_ids.json`.
The link to your app is `<canister_id>.ic0.app`. For example, if your canister ID is `zgvi5-hiaaa-aaaam-aaasq-cai`, your app will be at `https://zgvi5-hiaaa-aaaam-aaasq-cai.ic0.app/`.

The link to your app is `<frontend canister id>.ic0.app`. For example if your `frontend` canister ID is `zixfv-4yaaa-aaaam-aaatq-cai`, your app will be at `https://zixfv-4yaaa-aaaam-aaatq-cai.ic0.app/`.
Loading

0 comments on commit bfabc84

Please sign in to comment.