Ewon TechForum
Providing technical solutions to technical requests


Custom page not working when using T2M (React, TypeScrypt)
ktmachinex Offline
Junior Member
#1
Hi,

I've created a custom web page using React framework and TypeScrypt. I then put it on the ftp of the ewon flexy 205 and configure the device to open by default on the custom page. Locally, when entering the ip address of the ewon, I can see my custom page and it works perfectly.

The problem occurred when I'm trying to access to my custom page while using T2M. It seens, the page has a problem reading the manifest.json file that I provided along the index.html page. See the attachment for more info.

Any idea why my page does not work when using T2M?

Thanks in advance,
ktmachinex


Attached Files
.jpg   Error in console.jpg (Size: 55,92 KB / Downloads: 11)
Reply

simon Offline
eWON Support
#2
Hi,

When you develop pages that must be seen through M2Web, you have to be careful to the links you use.
Indeed, M2Web parses your pages to replace the coded links by https://M2web.talk2m.com/account/ewon/restOfUrl.

If you want we have a closer look at your case, the best is to contact your local support representative.

Simon
Reply

ktmachinex Offline
Junior Member
#3
(02-10-2019, 01:21 PM)simon Wrote: Hi,

When you develop pages that must be seen through M2Web, you have to be careful to the links you use.
Indeed, M2Web parses your pages to replace the coded links by https://M2web.talk2m.com/account/ewon/restOfUrl.

If you want we have a closer look at your case, the best is to contact your local support representative.

Simon

Hi Simon,

Thanks for the reply. Is there any documentation about what I should be careful about when creating custom pages to have it work on M2Web?

I think my problem might have to do with using the react framework, how I create my routes within my custom page and/or how I manage my history (by hash).

I'll try to contact my local support representative.

Thanks again for all the help provided,
ktmachinex
Reply

simon Offline
eWON Support
#4
Hi,

Regarding your question "Thanks for the reply. Is there any documentation about what I should be careful about when creating custom pages to have it work on M2Web?", no there is no doc for that unfortunately.
If you develop it from scratch, I think that as long as you use relative links, everything should work fine in M2Web.

Usually what makes troubles is when absolute links are computed from the javascript...

Simon
Reply

ktmachinex Offline
Junior Member
#5
Hi,

All seems to point towards the navigation link href attribute.

Code:
// Is equal to this when view locally
<a class="nav-link" href="/settings/ewon">

// When view with Talk2M, it is changed for that
<a class="nav-link" href="#/machinex/RDHT Flexy Test/RDHT Flexy Test">

Now I'm trying to figure the proper fix to this.

Thanks for your time.

Any help is always welcome,
ktmachinex
Reply

simon Offline
eWON Support
#6
Hi,

You should perhaps use a relative link like "settings/ewon" or "../../settings/ewon" ?

Simon
Reply

ktmachinex Offline
Junior Member
#7
I finally found the problem / issue.

  • When accessing my custom web page locally, the address "index.html" has the location " / " and the route match " / ".
  • When accessing my custom web page through Talk2M, the address "index.html" has the location " / " and the route match " /[Talk2M account name]/[ewon device name]/ ".
This was messing up my routes and it could not render the proper component according to the link I clicked since the location would not match the route match.

Is this behaviour expected when using Talk2M (I'm no web developer expert by no mean)?

To fix the issue, I added a wildcard ('*') to every route like this:
Code:
<Switch>
            <Route path='*/home' component={Home}/>
            <Route path='*/users' component={Users}/>
            <Route path='*/about' component={About}/>
            <Route>             
                <NoMatch/>
            </Route>
          </Switch>




Here's the code I used to found the behaviour (the file was named App.js):
Code:
import React, { Component } from "react";
import { Switch, Route, Link, Redirect, HashRouter as Router, useLocation, useRouteMatch } from "react-router-dom";

function Home() {
  return (
    <div>
      <h2>Home</h2>
      {getRoutingInfo(useLocation(), useRouteMatch())}
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
      {getRoutingInfo(useLocation(), useRouteMatch())}
    </div>
  );
}

function Users() {
  return (
    <div>
      <h2>Users</h2>
      {getRoutingInfo(useLocation(), useRouteMatch())}
    </div>
  );
}

function NoMatch(){
  let match = '/talk2mAccountName/DeviceName/';
  let location = useLocation();
  let routeMatch = useRouteMatch();

  if(location.pathname === '/' && routeMatch.path === match){
    return <Redirect to='/home' />
  }

  return (
    <div>
      <h2>No match for:</h2>
      {getRoutingInfo(location, routeMatch)}
    </div>
    );
}

function getRoutingInfo(location, match){
  return (
    <div>
      <h3>
        <ul>
          <li>Location: <code>{getLocationPath(location)}</code></li>
          <li>Router Match: <code>{getRouterMatch(match)}</code></li>
        </ul>
      </h3>
    </div>
  );
}

function getLocationPath(location){
  return location.pathname;
}

function getRouterMatch(match){
  return "[" + match.path + "] url: [" + match.url + "]";
}

class App extends Component {

renderNavBar(){
    return(
      <div className="container">
        <h1>Navigation bar</h1>
        <nav>
          <ul>
            <li>
              <Link to='/home'>Home</Link>
            </li>
            <li>
              <Link to='/users'>Users</Link>
            </li>
            <li>
              <Link to='/about'>About</Link>
            </li>
            <li>
              <Link to='/noMatch'>Will not match</Link>
            </li>
          </ul>
        </nav>
      </div>
    );
  }

  render(){
    return (
      <Router> {/* basename="usr/statsifier/machinex/RDHT/" | basename="/machinex/RDHT/" */}
        <div className="container">
          {this.renderNavBar()}
          <hr />

          {/*
            A <Switch> looks through all its children <Route>
            elements and renders the first one whose path
            matches the current URL. Use a <Switch> any time
            you have multiple routes, but you want only one
            of them to render at a time
          */}
          <Switch>
            <Route path='*/home' component={Home}/>
            <Route path='*/users' component={Users}/>
            <Route path='*/about' component={About}/>
            <Route>             
                <NoMatch/>
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default (App);

Thanks for your time.

It's always much appreciated.

Have a nice day,
ktmachinex
Reply

simon Offline
eWON Support
#8
Hi,

Yes, to me, this is an expected behavior. M2Web searches all links to replace them by m2web.talk2m.com/account/ewon/...

Very happy that it works now :-)

Simon
Reply

LewisH304 Offline
Junior Member
#9
Try this in web.config (includes 500 error support as well):

<configuration>
...
<system.web>
...
<customErrors mode="On" redirectMode="ResponseRewrite" defaultRedirect="~/Error/500.htm">
<error statusCode="404" redirect="~/Error/404.htm" />
<error statusCode="500" redirect="~/Error/500.htm" />
</customErrors>
...
</system.web>
...
<system.webServer>
...
<httpErrors errorMode="Custom">
<remove statusCode="404" />
<error statusCode="404" path="/Error/404.htm" responseMode="ExecuteURL" prefixLanguageFilePath="" />
<remove statusCode="500" />
<error statusCode="500" path="/Error/500.htm" responseMode="ExecuteURL" prefixLanguageFilePath="" />
</httpErrors>
...
</system.webServer>
...
</configuration>
I would also recommend using .aspx pages rather than .htm so that you can ensure the proper status code is set in the response headers.

<%@ Page Language="C#" %>

<% Response.StatusCode = 404; %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>404 Not Found</title>
</head>
<body>
404 Error
</body>
</html>
Reply



Possibly Related Threads…
07-10-2019, 10:24 PM
Last Post: ktmachinex
24-09-2019, 04:39 PM
Last Post: simon
12-06-2019, 02:08 PM
Last Post: valentin.joigneau
30-04-2019, 02:19 PM
Last Post: simon
09-10-2018, 11:11 PM
Last Post: simon
12-03-2018, 10:45 PM
Last Post: simon
19-01-2018, 09:03 AM
Last Post: MadhuriSalunkhe
03-04-2017, 02:17 PM
Last Post: simon



Users browsing this thread:
1 Guest(s)



Theme © Ewon 2019 - Forum software by © MyBB - Cookie policy