Skip to main content

Default project template

Overview

The dfx new <project_name> command creates a new project directory, template files, and a new <project_name> Git repository for your project.

When creating new projects with dfx, only alphanumeric characters and underscores should be used. This is to assure that project names are valid within Motoko, JavaScript, and other contexts.

Exploring the default project structure

By default, the project structure will resemble the following:

hello/
├── README.md # Default project documentation
├── dfx.json # Project configuration file
├── node_modules # Libraries for frontend development
├── package-lock.json
├── package.json
├── src # Source files directory
│ ├── hello_backend
│ │ └── main.mo
│ ├── hello_frontend
│ ├── assets
│ │ ├── logo.png
│ │ ├── main.css
│ │ └── sample-asset.txt
│ └── src
│ ├── index.html
│ └── index.js
└── webpack.config.js

In this directory, the following files and directories are notable:

  • README.md: The default README file to be used for documenting your project.
  • dfx.json: The default configuration file used to set configurable options for your project.
  • src/: The source directory that contains all of your dapp's source files.
  • hello_backend: The source directory that contains your dapp's backend code files.
  • hello_frontend: The source directory that contains your dapp's frontend code files.

Reviewing the default configuration

By default, the dfx.json file will contain automatically generated configuration settings for your new project. This file is used to configure the components of your project:

{
"canisters": {
"hello_backend": {
"main": "src/hello_backend/main.mo",
"type": "motoko"
},
"hello_frontend": {
"dependencies": [
"hello_backend"
],
"frontend": {
"entrypoint": "src/hello_frontend/src/index.html"
},
"source": [
"src/hello_frontend/assets",
"dist/hello_frontend/"
],
"type": "assets"
}
},
"defaults": {
"build": {
"args": "",
"packtool": ""
}
},
"output_env_file": ".env",
"version": 1
}

Reviewing the default program code

The backend canister's code will be located in the src/hello_backend subdirectory.

///src/hello_backend/main.mo
actor {
public query func greet(name : Text) : async Text {
return "Hello, " # name # "!";
};
};

Next steps

To interact with this code, you first need to deploy the canister. To learn how to deploy to a local developer environment, see the documentation here: