Skip to main content

4: Motoko quickstart

Beginner
Motoko
Tutorial

Overview​

This at-a-glance cheat sheet summarizes the steps to follow for quick reference.

Prerequisites​

Before getting started, assure you have set up your developer environment according to the instructions in the developer environment guide.

Creating a new project​

Open a terminal window on your local computer, if you don’t already have one open.

Create a new project and change to the project directory.

Use `dfx new [project_name]` to create a new project:

```
dfx new hello_world
```

You will be prompted to select the language that your backend canister will use:

```
? Select a backend language: ›
❯ Motoko
Rust
TypeScript (Azle)
Python (Kybra)
```

Then, select a frontend framework for your frontend canister. In this example, select:

```
? Select a frontend framework: ›
SvelteKit
React
Vue
❯ Vanilla JS
No JS template
No frontend canister
```

Lastly, you can include extra features to be added to your project:

```
? Add extra features (space to select, enter to confirm) ›
⬚ Internet Identity
⬚ Bitcoin (Regtest)
⬚ Frontend tests
```

Editing the default files​

Edit the src/<project_name>_backend files to define your service or application.

Edit the src/<project_name>_frontend files with HTML, JavaScript, and CSS that provides the frontend for your service or application.

Starting the deployment environment​

Start the Internet Computer for local development or check your connection to the Internet Computer for network deployment:

Register, build, and deploy locally or on the mainnet​

To deploy locally, use the command:

dfx deploy

For deploying to the mainnet, use: --network ic.

dfx deploy --network <network>

View your service or application in a browser, using the URLS in the output of the dfx deploy command:​

...
Committing batch.
Committing batch with 18 operations.
Deployed canisters.
URLs:
Frontend canister via browser
        access_hello_frontend: http://127.0.0.1:4943/?canisterId=cuj6u-c4aaa-aaaaa-qaajq-cai
Backend canister via Candid interface:
        access_hello_backend: http://127.0.0.1:4943/?canisterId=cbopz-duaaa-aaaaa-qaaka-cai&id=ctiya-peaaa-aaaaa-qaaja-cai

Next steps​

For a more detailed look at writing and deploying canisters, move onto the writing and deploying canisters page.