What is Infura?

Infura is a service that provides access to Ethereum and IPFS networks via a set of APIs. It allows developers to connect to the Ethereum blockchain without needing to run their own nodes, which can be resource-intensive and complex.

What is Alchemy?

Alchemy is another blockchain development platform that offers a suite of tools and services for building decentralized applications. It provides enhanced APIs, analytics, and monitoring tools to help developers manage their blockchain applications more effectively.

Using Infura and Alchemy with Ethers.js

To use Infura or Alchemy with Ethers.js, you need to create an account with either service and obtain an API key. This key will allow you to connect to their Ethereum nodes.

1. Create an Account and Get API Key

- For Infura, visit Infura's website, sign up, and create a new project to get your API key.
- For Alchemy, go to Alchemy's website, sign up, and create a new app to obtain your API key.

2. Set Up Your Project

If you haven't set up an Ethers.js project yet, you can follow these steps: 

mkdir ethers-infura-alchemy-project
cd ethers-infura-alchemy-project
npm init -y
npm install ethers

3. Create an HTML File

Create an index.html file in your project directory. You can use the following code as a starting point: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Infura and Alchemy with Ethers.js</title>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js"></script>
</head>
<body>
    <h1>Connect to Ethereum via Infura or Alchemy</h1>
    <button id="getBlockButton">Get Latest Block</button>
    <pre id="blockInfo"></pre>
    <script>
        async function connectToProvider() {
            // Replace with your Infura or Alchemy URL
            const providerUrl = "https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID"; // or use Alchemy URL
            
            // Create a provider
            const provider = new ethers.providers.JsonRpcProvider(providerUrl);
            
            // Get the latest block
            const blockNumber = await provider.getBlockNumber();
            const block = await provider.getBlock(blockNumber);
            document.getElementById('blockInfo').innerText = JSON.stringify(block, null, 2);
        }

        document.getElementById('getBlockButton').onclick = connectToProvider;
    </script>
</body>
</html>

4. Replace the Provider URL

In the code above, replace YOUR_INFURA_PROJECT_ID with your actual Infura Project ID or use the URL of your Alchemy app. For example, if you are using Alchemy, it might look like this: https://eth-mainnet.alchemyapi.io/v2/YOUR_ALCHEMY_API_KEY.

5. Run a Local Server

To view your project in a browser, you’ll need to serve it over a local server. You can use a simple server like http-server or any other static server. Install it globally using npm if you haven't already: 

npm install -g http-server

Then, run the server in your project directory: 

http-server

Open your browser and navigate to http://localhost:8080 (or the port shown in your terminal) to see your application in action.

Conclusion

Infura and Alchemy are powerful tools that simplify the process of connecting to the Ethereum blockchain. By using Ethers.js with these services, developers can easily access blockchain data and build decentralized applications without the overhead of managing their own nodes. This makes it easier to focus on building features and improving user experience.