ReactJs Archives - Drunk Coding

Source Code

The foldableTable HOC had been submitted to merge with react-table.org. Hopefully, it will be available soon.

Hope this library is useful to you.

The Reverse Proxy

Working with Service Fabric, you might hear about the Reverse Proxy, a built-in feature of Azure Service Fabric helps microservices running in a Service Fabric cluster discover and communicate with other services that have HTTP endpoints.

The benefit of Reverse Proxy is providing the standard uniform resource identifier format to identify the services running on Service Fabric Clusters. So you can access your services via Reverse Proxy regardless of the actual port of the services.

Refer here to understand more about the Reverse Proxy.

By default, After installed service fabric the Reverse Proxy will run on port 19081 and access the applications or services by following the format below.

http(s)://localhost:19081/[ApplicationName]/[ServiceName]

1	http(s)://localhost:19081/[ApplicationName]/[ServiceName]

Supported Platforms

Reverse proxy in Service Fabric currently supports the following platforms

Windows Cluster: Windows 8 and later or Windows Server 2012 and later.

Linux Cluster: Reverse Proxy is not currently available for Linux clusters.

So you should using Window 8 or 10 for develop in order to test the Reverse proxy.

The Service Fabric Application

Create a Service Fabric Application on Visual Studio you will see it allows to host various services inside.

There are 2 kindles of services:

The Internal services that are working as backend services and can be access by the other services within an application (using Microsoft.ServiceFabric.Services.Remoting.IService ).
The https services that allow users to operate with your data or an API services that exposing your data to other consumers outside of the application.

Check out here for more information about Service Fabric Application

In this demo, I created a Service Fabric application named MvcReservedProxy and added a ReactJs Mvc app. When running the application, I shall have a ReactJs app running on port 8383.

Port 8383 is a random value was assigned by Visual Studio when creating the service.

And here is the endpoint configuration in the service manifest.

<Endpoints>
   <Endpoint Protocol="http" Name="ServiceEndpoint" Type="Input" Port="8383" />
</Endpoints>

</Endpoints>

The application is working perfectly fine with this port. However, let’s see if you have many apps running on PRD, and each application has some HTTP services inside, resolving the port conflict is a challenge as we need to ensure that the occupation ports are not conflicted with existing one in PRD environment.

Fortunately, Service Fabric doesn’t require the ports to be specified. Instead, it will pick-up the free ports when startup your services. After removed, the port from the endpoint and reran the application. I have a new port http://localhost:30001

Amazing, form now onward I don’t need to care about the ports of the HTTP services anymore.

But, whenever, my application got restarted, re-deployed it will have a new port. So, how can I access my application? Luckily, as mentioned above the Reverse proxy is using a specific uniform resource identifier format to identify the service. So, I can access my application via below URL:

http://localhost:19081/MvcReservedProxy/ReacJs

1	http://localhost:19081/MvcReservedProxy/ReacJs

However, the website is not working correctly as some resource files were not able to reach when accessing via Reverse proxy.

To fix this issues, we need to add some additional code to the ReactJs project as below.

I. Update ServiceInstanceListener

Open the ReacJs.cs and changes the ServiceFabricIntegrationOptions from None to UseReverseProxyIntegration

return new WebHostBuilder()
    .UseKestrel()
    .ConfigureServices(
        services => services.AddSingleton<StatelessServiceContext>(serviceContext))
    .UseContentRoot(Directory.GetCurrentDirectory())
    .UseStartup<Startup>()
    //Enable Reserved Proxy - changes ServiceFabricIntegrationOptions from None to UseReverseProxyIntegration.
    .UseServiceFabricIntegration(listener, ServiceFabricIntegrationOptions.UseReverseProxyIntegration)
    .UseUrls(url)
    .Build();

return new WebHostBuilder()

.UseKestrel()

.ConfigureServices(

services => services.AddSingleton<StatelessServiceContext>(serviceContext))

.UseContentRoot(Directory.GetCurrentDirectory())

.UseStartup<Startup>()

//Enable Reserved Proxy - changes ServiceFabricIntegrationOptions from None to UseReverseProxyIntegration.

.UseServiceFabricIntegration(listener, ServiceFabricIntegrationOptions.UseReverseProxyIntegration)

.UseUrls(url)

.Build();

II. Update Mvc Startup configuration

Open Startup.cs and add below code into Configure method.

//Enable Reserved Proxy - Add ReservedName, the name can be found in the Service Fabric Explorer
const string ServiceNameUrl = "MvcReservedProxy/ReacJs";

//Enable Reserved Proxy - handle transform
app.Use((context, next) =>
{
    //Apply the fabric URL if accessing by the Service Fabric Reverse Proxy
    if (context.Request.Headers.TryGetValue("X-Forwarded-Host", out var _))
        context.Request.PathBase = $"/{ServiceNameUrl}/";

    return next();
});

//Enable Reserved Proxy - Add ReservedName, the name can be found in the Service Fabric Explorer

const string ServiceNameUrl = "MvcReservedProxy/ReacJs";

//Enable Reserved Proxy - handle transform

app.Use((context, next) =>

{

//Apply the fabric URL if accessing by the Service Fabric Reverse Proxy

if (context.Request.Headers.TryGetValue("X-Forwarded-Host", out var _))

context.Request.PathBase = $"/{ServiceNameUrl}/";

return next();

});

The ServiceNameUrl format is [YourApplicationName]/[YourServiceName].

III. Update Base Url for Javascript application

After the second step, the MVc application will work fine. However, if you are hosting javascript applications (ex: ReacJs or AngularjS), then you need to update the base tad into your _Layout.cshtml because the routing of ReactJs router will use it.

<!--Enable Reserved Proxy this base url is for ReacJs app-->
<base href="~/" />

1 2	<!--Enable Reserved Proxy this base url is for ReacJs app--> <base href="~/" />

Use in here

//in boot-client.js
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!;
const history = createBrowserHistory({ basename: baseUrl });

//in boot-client.js

// Create browser history to use in the Redux store

const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!;

const history = createBrowserHistory({ basename: baseUrl });

Now, Rerun the application and see the result.

Cheers and the source code here.

Tag: ReactJs

The Foldable HOC for react-table.js.org

FoldableTable HOC

How it works

With Header Columns

With Normal Columns

State management

Custom Components