But developers who want to start building on Cosmos might find it intimidating; don't even know where to start. That's where create-cosmos-app comes in – a powerful tool designed to streamline the process.

With a single command, you can scaffold a development-ready frontend DApp that is pre-configured to connect with various Cosmos blockchains. e.g. Osmosis, Injective, etc... Imagine an application equipped with a sleek UI toolkit built with Next.js, a seamless wallet connection modal, and all the essentials to jumpstart your development journey. Awesome right? ... right? :)

Ready to dive in? Let's get started!

First things first, install the create-cosmos-app tool using this command: npm install -g create-cosmos-app then check the version using cca -v. if installed correctly you should see this output:

(Alternatively, you can replace npm with npx if you prefer than)

cca -v
2.3.3

To build our Dapp we need to Scaffold one, so let's go through the steps.

1. We'll scaffold a dApp using this command: npx create-cosmos-app@latest , which leads you to:

   • Enter your new app name, e.g cosmos-dapp

   • Choose a template using the arrow keys. connect-chain gives you a wallet connection that defaults to one chain, while connect-multi-chain as you might have already guessed enables the connection of multiple chains, this is the best template when building a multi-chain app. we'll go with connect-multi-chain for this guide.

    npx create-cosmos-app@latest
    ? [name] Enter your new app name cosmos-dapp
    Cloning into 'cosmos-dapp'...
    ? [template] which template (Use arrow keys)
      connect-chain
    ❯ connect-multi-chain

    ➤ YN0000: · Yarn 4.3.0
    ➤ YN0000: ┌ Resolution step
    ➤ YN0085: │ - @yarnpkg/lockfile@npm:1.1.0, commander-plus@npm:0.0.6, generate-lockfile@npm:0.0.12, keypress@npm:0.1.0
    ➤ YN0000: └ Completed in 0s 356ms
    ➤ YN0000: ┌ Post-resolution validatio

                     |              _   _
         ===         |.===.        '\-//`
        (o o)        {}o o{}        (o o)
    ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-

    ✨ Have fun! Now you can start on your project ⚛️

    Now, run this command:

    cd ./cosmos-dapp && yarn dev

2. After the command has finished running and installed all the dependencies, go ahead and run the last command printed out: cd ./cosmos-dapp && yarn dev, this will change directory into the dApp folder and start a server.

cd ./cosmos-dapp && yarn dev
  ▲ Next.js 13.5.6
  - Local:        http://localhost:3000

 ✓ Ready in 5.7s

Next, copy the localhost URL in your browser. The dApp is configured to connect to the Cosmos Hub chain by default chain. You should see something similar to this in your Browser(The base components for this Template):

Effectively create-cosmos-app created an integration between Cosmos-kit, CosmJs, Interchain-UI, NextJs, and Chain-registry. And it gives you a fast way to start building apps with everything already bundled for you.

3. You can choose a chain you want to connect to using the drop-down or searching for it, then click the "Connect Wallet" button and choose Keplr(hoping you have it installed), Approve the prompt to add to Chain to Keplr and Sign the transaction:

   

You can also scroll down and see other content, This was added here to help educate you on some of the other tools you should be working with.

For Example:

• Cosmos-Kit: ⚡️Connect easily to 20+ wallets using Cosmos-Kit including Ledger, Keplr, Cosmostation, Leap, Trust Wallet, OKX, XDEFI, Exodus, Wallet Connect, and more!

• Telescope: For working with SDK messages

• Ts Codegen: For CosmWasm and creating nice Java-Script SDKs

• Chain-registry: For... and Links and videos to learn.

Happy Building 💙 From Cosmology