Develop an application using Blazor, Node Express JS, and Mongo DB

To build an app using Blazor, Node Express JS, and Mongo DB, we will need to set up a project structure, create a server with Node Express JS, connect to a MongoDB database, and then create a Blazor front-end to interact with the server.

1. Set up the project structure:

First, create a new folder for your project and open it in your terminal or command prompt. Inside your project folder, create two sub-folders: one for the server-side code (named "server") and one for the client-side code (named "client").

1. Create a server with Node Express JS:

Inside the "server" folder, initialize a new Node.js project by running the command npm init -y. This will create a package.json file with default settings. Next, install Express.js by running npm install express.

Create a new file named "server.js" in the "server" folder and paste the following code:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

1. Connect to a MongoDB database:

To connect to a MongoDB database, you will need to install the MongoDB Node.js driver. Run npm install mongodb in the "server" folder.

Next, add the following code to "server.js" to connect to a MongoDB database:

const { MongoClient } = require('mongodb');

const uri = 'mongodb://localhost:27017';
const client = new MongoClient(uri);

async function connectToMongo() {
  try {
    await client.connect();
    console.log('Connected to MongoDB');
  } catch (err) {
    console.error(err);
  }
}

connectToMongo();

1. Create a Blazor front-end:

Inside the "client" folder, create a new Blazor WebAssembly project by running the command dotnet new blazorwasm.

Open the generated project in your code editor and add a service to communicate with the server. Create a new file named "ApiService.cs" in the "client/Services" folder and paste the following code:

using System.Net.Http;
using System.Threading.Tasks;

public class ApiService
{
    private readonly HttpClient _httpClient;

    public ApiService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task<string> GetData()
    {
        return await _httpClient.GetStringAsync("http://localhost:5000");
    }
}

1. Connect the Blazor front-end to the server:

Modify the "Program.cs" file in the "client" folder to register the ApiService:

builder.Services.AddScoped<ApiService>();

Open the "Index.razor" file in the "client/Pages" folder and modify it to call the ApiService:

@page "/"

@code {
    private string message;

    protected override async Task OnInitializedAsync()
    {
        message = await ApiService.GetData();
    }
}

<h1>@message</h1>

1. Run the app:

To run the app, start the Node Express JS server by running node server.js in the "server" folder. Then, run the Blazor app by running dotnet run in the "client" folder.

Open your web browser and navigate to http://localhost:5000 to see the message "Hello World!" displayed on the page, indicating that the front-end successfully communicated with the server.

Congratulations! You have successfully built an app using Blazor, Node Express JS, and Mongo DB. You can now expand on this project by adding more features and functionality to create a fully functional web application.