Skip to main content

Local development is here!

Β· 4 min read


Hello πŸ‘‹,

I'm excited to share that local dApp development and end-to-end testing are now available on Juno through our new Docker image.

This update serves as a key addition to our upcoming features for the year to come, offering developers a practical solution to build or test their projects in a sandbox environment.

The documentation for this new feature is available here. Moreover, the container's code is open source, and you can access it here for more insights.

In this blog post, rather than reiterating the documentation, I'll provide an example to demonstrate how you can effectively utilize this feature in your development workflow.


Before you begin​

Make sure you have Docker installed on your machine.


Clone the example​

I've prepared a sample project to demonstrate how a dApp can be run and persist data in a local environment. Open your terminal and clone the sample project developed with Astro:

git clone https://github.com/junobuild/examples/
cd examples/astro
npm ci

Run the Docker Image​

To start the container, head to the subfolder containing the configuration I prepared for you.

cd docker

In this folder, you will find two files. A docker-compose.yml file contains essential information for the image, such as the port and a volume. For more details, refer to the documentation.

docker-compose.yml
services:
juno-satellite:
image: junobuild/satellite:latest
ports:
- 5987:5987
volumes:
- astro_dapp:/juno/.juno
- ./juno.dev.json:/juno/juno.dev.json

volumes:
astro_dapp:

There's also a juno.dev.json file, which is designed to set up a collection once the Satellite is populated locally, similar to what you can do in Juno's administration console.

juno.dev.json
{
"satellite": {
"collections": {
"db": [
{
"collection": "counter",
"read": "managed",
"write": "managed",
"memory": "stable"
}
]
}
}
}

Given that everything is set for you, you can run the following command to start the container:

docker compose up

And that's it! The container is designed to manage serving a local Internet Computer replica. It also embeds a custom CLI which handles deploying and populating the Internet Identity and a Satellite. With this setup, you have everything necessary for efficient local development.


Run the dApp​

To get the sample dApp up and running, open another terminal window. Navigate back to the root folder of the project and start the dApp using the following command:

npm run dev

This project leverages our Vite Plugin and libraries, streamlining the setup process with minimal configuration needed. I've already configured it for you, but typically, you would only need to set a container option for the plugin:

astro.config.js
import { defineConfig } from "astro/config";
import juno from "@junobuild/vite-plugin";

export default defineConfig({
vite: {
plugins: [
juno({
container: true
})
]
}
});

And pass along the environment variable to the initialization:

await initSatellite({
satelliteId: import.meta.env.PUBLIC_SATELLITE_ID,
container: import.meta.env.PUBLIC_CONTAINER
});

With the local dApp server active, you can now access it in your browser at http://localhost:4321.

Upon visiting the site, you'll find an option to sign in using Internet Identity. Since everything is deployed locally in a sandbox, your existing identity (anchor) won't be recognized, that's why you will have to create a new one.

A screenshot that showcases the sample dApp home screen

Once signed in, you'll see a "count" action, a simple feature that increments a counter and saves a value associated with your identity.

A screenshot that showcases the sample dApp once signed in

This demonstrates the dApp's capability to interact with local data and user identities.


Conclusion​

In conclusion, the integration of local development capabilities with Juno, using Docker, marks a significant step forward in streamlining and simplifying the development process for dApps.

This setup not only facilitates a more efficient development cycle but also offers a practical environment for thorough testing. It's a straightforward, no-frills approach that underscores Juno's commitment to improving the developer experience without overcomplicating the process.

I am excited to see the innovative applications and solutions the developers of our community will create with these enhanced tools at their disposal.

πŸ‘‹


Stay connected with Juno by following us on X/Twitter.

Reach out on Discord or OpenChat for any questions.

⭐️⭐️⭐️ stars are also much appreciated: visit the GitHub repo and show your support!

Setting Up Your Internet Identity on internetcomputer.org

Β· 4 min read


Web 2.0 uses usernames and passwords for logging into websites, which isn't very secure, can be a hassle, and doesn't always keep your information private.

Internet Identity (II), on the other hand, is a better way to log in online. Instead of just usernames and passwords, it uses new technology like fingerprints or Face ID on your phone or special hardware devices to make sure it's really you when you log in.

This authentication provider is used by Juno to secure access to its administration console for developers.

While most decentralized applications on the Internet Computer use the default domain ic0.app for the registration process using Internet Identity (referred to as the "old domain" in this article), Juno defaults to the more recognizable, aesthetically pleasing and easy to remember domain internetcomputer.org.

However, there is a caveat to this choice. When you register with Internet Identity, it's tied to a specific domain. This means that if you have previously created an identity to access other decentralized apps on the Internet Computer, you may not be able to sign in to Juno's console seamlessly using the main "call to action". You won't be blocked from logging in; the login screen also supports the old domain. However, the option to use it is not as prominent.

That's why in this article, we will guide you through the process of ensuring your identity works seamlessly on both domains. By adding a passkey for the other domain, you will ensure that your identity is available for sign-in, regardless of those two choices.

note

In the following instructions, we assume that your identity works on identity.ic0.app, and we are demonstrating how to add it for identity.internetcomputer.org. Of course, this tutorial also applies in reverse; you can simply switch the domain while following these steps.


Step-by-Step Guide​

Here are the steps to follow:

1. Sign-in Internet Identity​

As a first step, you need to login into Internet Identity. Go to https://identity.ic0.app.

2. Add passkey​

As we are looking to register a passkey for the other domain on your device, initiate the process by clicking "Add passkey".

Initiate add passkey screenshot

3. Copy the URL​

Internet Identity will present you with various user-friendly options for registering a new passkey. While these options are handy if you plan to add an additional browser or device, for the purpose of this tutorial, our goals are different.

Therefore, please ignore the information on the screen and only copy the code that is presented to you.

Copy url screenshot

4. Navigate to modified URL​

We are assuming that you want to register the other domain for the same browser. In that case, open a new tab and paste the URL you just copied but, before pasting the link, modify the domain part to point to the other domain.

For example, change a copied link from https://identity.ic0.app/?action=add-passkey&ii=2279219 to https://identity.internetcomputer.org/?action=add-passkey&ii=2279219 by replacing ic0.app with internetcomputer.org.

Note that along the way, you will be prompted to authenticate yourself with your authentication method, such as fingerprint or Face ID. This ensures a secure sign-in on the other domain as well.

Verify new passkey screenshot

5. Enter verification code​

To validate the new passkey, you will be prompted to verify a code in the original tab where you initiated the creation of the new passkey.

Simply select and copy the verification code displayed on the screen.

Copy verification code screenshot

Return to the previous tab and enter the code. You can either manually type it or, once you've placed your cursor in the first digit field, paste the entire code (Ctrl|Cmd+V), which will be automatically filled.

Enter verification code screenshot

6. Confirmation​

Congratulations, the passkey on the device you just used for this tutorial is now ready for both the old and other domain.

Success screenshot

7. Optionally, rename the new passkey​

The new passkey will inherit a default name. Optionally, you can rename it to make it clear in the future which one is related to which domain. To do this, continue to Internet Identity, select "Rename", and follow the instructions provided.

Rename passkey screenshot


Conclusion​

In this guide, we've walked you through the process of setting up your Internet Identity for another domain. We hope this has been helpful and will provide you with easy access to Juno's administration console and other dApps using multiple domains for sign-in with Internet Identity.

πŸ‘‹

Stay connected with Juno by following us on X/Twitter.

Reach out on Discord or OpenChat for any questions.

⭐️⭐️⭐️ stars are also much appreciated: visit the GitHub repo and show your support!

Introducing Juno Analytics - Unlock Deeper Insights with Privacy in Mind

Β· 3 min read


We're excited to introduce Juno Analytics, a simple, performant, and open-source web3 analytics solution designed with privacy in mind for the developers building decentralized dapps with Juno.

In a digital age where data privacy is paramount, Juno Analytics empowers you to gather valuable insights about your users while ensuring anonymity and respecting their privacy.

Here's a closer look at this powerful new feature:


Privacy-Friendly Analytics​

Juno Analytics is part of our commitment to user privacy. It conducts measurements of your dapps and sites completely anonymously, without using cookies or collecting any personal data.

This means no more intrusive cookie banners, no persistent identifiers, no cross-site tracking, and no cross-device tracking.

Your analytics data remains solely focused on providing you valuable insights without any other ulterior motives.


Performance-Optimized Script​

Our JavaScript library for gathering analytics is designed for peak performance. It consists of a minimal main script that seamlessly integrates with your application's user interface and a dedicated worker responsible for handling logic and cryptography.

This thoughtful design ensures that adding analytics won't slow down your application, even during boot time, preserving your customer acquisition rate.


Comprehensive Tracking​

With Juno Analytics, you're not limited to just basic page views. You can gain deeper insights into your visitors by creating custom events to track conversions, attributions, and more. It's a powerful tool for optimizing your dapps and sites.


Fully Open Source​

Juno is fully committed to the principles of open-source development. Unlike proprietary tools like Google Analytics, Juno Analytics is built with a commitment to transparency and freedom.


You Own Your Data​

All data tracked by our analytics solution is securely stored on the blockchain. As with all our services, you have full control over your smart contracts, and your data remains exclusively yours.


Getting Started​

To begin using Juno Analytics, please refer to our detailed documentation for step-by-step instructions.

It will guide you through the process of setting up and integrating Analytics into your websites and dapps. πŸš€


Conclusion​

We hope you're as excited about Juno Analytics as we are! This feature marks a significant stride toward a more privacy-conscious analytics solution and provide Juno's developers an additional feature in the eco-system to build awesome decentralized applications.

πŸ‘‹

Stay connected with Juno by following us on Twitter.

⭐️⭐️⭐️ stars are also much appreciated: visit the GitHub repo and show your support!

Building Dapps at Lightning Speed // Workshop

Β· One min read

Hey Juno Community,

I've recorded a tutorial that covers building dapps on the Internet Computer at lightning speed with Juno!

In this workshop, you'll learn how easily you can implement authentication in your app, save data and images on the chain, and ultimately launch your first smart contract. And the best part? You won't need to write a single line of backend code.

So, grab a cup of coffee and join me on this exciting journey.

Preparing Your App for Production: Icons, Metadata, and Beyond

Β· 12 min read

Photo by Sebastian Svenson


So, your decentralized application is all set for its Juno launch. But have you made sure that your icons, social images, web manifest, sitemaps, and robots settings are correctly configured for production?

These elements are not only important technically but also contribute to improving its presence on different social platforms and enhancing your app's visibility on search engines (SEO).

To help you with this crucial task, here's a comprehensive list of recommendations to prepare your web application for these purposes.

Deploying Uniswap Interface on Internet Computer with Juno

Β· One min read

Hey Juno Community,

We are thrilled to bring you an incredible tutorial on how to deploy the Uniswap interface on the Internet Computer using Juno! This exciting step transforms Uniswap into a fully decentralized application, with both the backend and frontend served directly from the blockchain.

In this video tutorial, Moritz from the DFINITY Foundation takes you through the seamless process of deploying from scratch to on-chain.

Deploy to the Internet Computer using GitHub Action with Juno

Β· 3 min read


In the fast-paced world of decentralized applications (dapps), automating deployment processes is key to accelerating development workflows. Juno, an innovative platform for building and hosting dapps on the Internet Computer, introduces an exciting new feature that simplifies the deployment process - the Juno GitHub Action.

In this blog post, we will delve into how this powerful integration enables developers to effortlessly deploy their dapps to the Internet Computer, leveraging the capabilities of the Juno platform.

Build a Web3 App with VueJS

Β· 9 min read

blue skies filled of stars

Photo by Billy Huynh on Unsplash


Introduction​

As a frontend JavaScript developer stepping into the decentralized web, you may have encountered numerous solutions for Web3 development. However, these solutions often focus on wallet integration and transaction execution, creating a learning curve and deviating from the familiar Web2 development experience.

But fear not! There's a solution that bridges the gap between Web2 and Web3 seamlessly - Juno.

In this blog post, we will explore how to leverage the power of Vue and Juno to develop decentralized applications (dApps). By combining these technologies, you'll discover a user-friendly and efficient approach to building powerful dApps that harness the potential of Web3. Join us on this journey as we unveil the secrets of Juno and empower you to create remarkable decentralized experiences with ease!