Skip to main content

How to integrate LikeMinds ReactJS Feed SDK in ASP.NET?

ASP.NET is a powerful open-source, server-side web application framework developed by Microsoft. It is designed for building dynamic, data-driven web applications and services. ASP.NET is part of the .NET ecosystem and supports multiple programming languages, including C# and VB.NET.

In this guide, we will walk you through the process of integrating LikeMinds ReactJS Feed component into your ASP.NET application.

Prerequisites​

Before you begin, make sure you have the following installed:

  • Node.js version 16 or above
  • ReactJS version 18.2.0
  • LikeMinds API Key: Sign up on the LikeMinds dashboard and obtain an API key for your application.

Step 1. Create a new project and add necessary dependencies.​

  1. Run the below command to create new project.
npm init
  1. Now install the following set of dependencies
# Installing the dev-dependencies
npm install --save-dev babel-core babel-loader @babel/preset-react @babel/preset-env babel-polyfill webpack webpack-cli

# Installing the core dependencies
npm install react@18.3.1 react-dom@18.3.1 @likeminds.community/likeminds-feed-reactjs

Step 2. Integrate LikeMinds Feed​

  1. Navigate to index.js file inside src and integrate LikeMinds Feed SDK, You can take a reference for this from here.
import { createRoot } from "react-dom/client";
import {
  LMSocialFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";

const App = () => {
  const userDetails = {
    uuid: "ENTER YOUR UUID HERE",
    username: "ENTER YOUR USERNAME HERE",
    apiKey: "ENTER YOUR API KEY HERE",
  };

  // Initiated LMFeedClient
  const lmFeedClient = initiateFeedClient();

  // Initiated LMFeedCustomEvents
  const customEventClient = new LMFeedCustomEvents();

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMSocialFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
      ></LMSocialFeed>
    </div>
  );
};

const root = createRoot(document.getElementById("lm-feed-root"));

root.render(<App />);

Step 3. Configure Webpack and Babel​

  1. Create a webpack.config.js file in the root folder and paste the provided configuration code.
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(pdf|jpg|png|gif|svg|ico)$/,
        use: [
          {
            loader: "url-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: "file-loader",
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
  },
};
  1. Create a .babelrc file in the root folder and add the provided presets for Babel.
{
  "presets": ["@babel/preset-react"]
}

Step 4. Generate the Bundle​

  1. Add "web": "webpack" in the scripts section of package.json.

  2. Run npm run web to compile the React application. This generates the bundle.js file in the specified dist folder.

Step 5. Setting Up MVC Application​

  1. In your MVC project add the following in your head tag
<head>
  <script
    crossorigin
    src="https://unpkg.com/react@18/umd/react.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  ></script>
</head>

  1. Copy the previously created bundle.js file in your wwwroot/js.

  2. Now create a div with an id lm-feed-root where you would want to render your Feed Application, and add a script tag referencing your bundle.js file Keep in mind that it should be inside the body tag of your page.

<div id="lm-feed-root"></div>
<script src="~/js/bundle.js"></script>

Conclusion​

By following this guide, you can integrate LikeMinds Feed SDK in ASP.NET application. For various customisations offered in the SDK, You can follow the documentation and do the changes in the the files created in step 2.