phenomic slash escaped with statically generated content

Hi I am playing with the tutorial, the generated paths for the static version npm run build have incorrectly escaped slash %2F

http://localhost:3000/phenomic/content%2Fposts/by-default/1/desc/date/limit-2/after-MDItc2Vjb25kLXBvc3Q%3D.json

It works if I manually edit it in the url:

http://localhost:3000/phenomic/content/posts/by-default/1/desc/date/limit-2/after-MDItc2Vjb25kLXBvc3Q%3D.json

It has phenomic/content%2F but it should have phenomic/content/, not sure who is generationg those.

My server does not magically unescape the escaped sequences.

Jun 17 '18 17:06 tolysz

These slashes are totally normal as our api server have static routes defined with specific parts for the path. Should not cause any troubles in practise.

What are the actual error(s) you are facing?

Jun 18 '18 11:06 MoOx

The server gets a request for http://localhost:3000/phenomic/content%2Fposts/ and the file is living at http://localhost:3000/phenomic/content/posts/. Thus there is no file to serve and no content to display. It only shows when I build the static version and serve it via an HTTP server.

My guess is that you urlify or escape slashes too much.

Jun 18 '18 13:06 tolysz

What are you using for serving static version?

Jun 18 '18 13:06 MoOx

Hi @MoOx, even for me this it's a bit strange.

When serving the static content on netlify everything works fine. But when you deploy it to hosteurope or one it's doesn't work.

When you manipulate the path, by replacing the %2F with / then everything works fine.

Jul 02 '18 21:07 jctf

Problem is that during development, I am not sure / will work for express dev server. We need to investigate this (sorry I am still in afk/vacations).

Jul 03 '18 07:07 MoOx

The development server works fine; I guess it does some magic with urlDecode. The problem is when deployed to an external simple web server.

Jul 03 '18 09:07 tolysz

Are you sure about development? Express routes for the api should not work...

Jul 27 '18 13:07 MoOx

Interestingly I'm experiencing the same behaviour: it works fine with the development server as well as using serve and now. Once I move to my chosen static hosting offering, requests for content with the %2F encoding fail with a 404. Traditionally, / and %2F are semantically different though can typically be used to suggest the same thing; however, per the W3 URL addressing recommendations, an encoded backslash has no hierarchical significance. By default, Apache takes this literally and one will need to enable the AllowEncodedSlashes directive which allows URLs to have encoded path separators.

Sep 03 '19 00:09 aralshawa

Having the same problem! When I try to run with a simple web server against the dist folder I get hit with this error.
Is there some way of telling phenomic not to generate the api part?

Nov 01 '19 04:11 smurphy8

@smurphy8 you can just omit the script tag at the bottom in a custom Html template https://github.com/phenomic/phenomic/blob/1a896add371a7903f9633457104f2caff78736c3/examples/react-app-blog/Html.js#L28 then the frontend won't try to load js, and you will basically have a html website (api will still be generated, but not used)

Nov 01 '19 14:11 MoOx

Okay I will give that a try

Nov 01 '19 23:11 smurphy8

Well the problem is I am using the Reason/React app which does the Html rendering in

https://github.com/phenomic/phenomic/blob/master/packages/plugin-renderer-react/src/renderHTML.js#L42

I think?

But I can't seem to build my own version of the preset app with the script tag taken out because I get a module not found error.

Gonna keep trying but worried I am going down the wrong rabbit hole or something!

Nov 03 '19 15:11 smurphy8

You can just throw a custom Html.js, even if you use reasonml. Like I do :D https://github.com/MoOx/moox.io/blob/d8e6124f73bc27b0c1e341f5bae292186e46723b/Html.js

This should work by just dropping a Html.js file at the root of your project :)

Nov 03 '19 16:11 MoOx

<script id="PhenomicHydration" type="text/json">{"path=content%2Fposts&by=defa...

is still being generated inside the <body> tag .

Nov 03 '19 18:11 smurphy8

It seems like the script that is calling the json is inside the body. My template looks like...

// @flow

import * as React from "react";
import { Helmet } from "react-helmet";
import { AppRegistry } from "react-native-web";

const Html = ({ App, render }: PhenomicHtmlPropsType) => {
  AppRegistry.registerComponent("App", () => App);
  const app = AppRegistry.getApplication("App");
  const { Main, State, Style } = render(app.element);
  const head = Helmet.renderStatic();
  return (
    <html {...head.htmlAttributes.toComponent()}>
      <head>
        {head.meta.toComponent()}
        {head.title.toComponent()}
        {head.base.toComponent()}
        {app.getStyleElement()}
        <Style />
        {head.link.toComponent()}
        {head.style.toComponent()}
        {head.script.toComponent()}
        {head.noscript.toComponent()}
      </head>
      <body {...head.bodyAttributes.toComponent()}>
        <Main />
        <State />
      </body>
    </html>
  );
};

export default Html;

Nov 03 '19 18:11 smurphy8

@smurphy8 try removing <State /> :D

Nov 03 '19 20:11 MoOx

well that didn't work but I just modded my server to handle the %2F ... Fixed!

Nov 04 '19 14:11 smurphy8

phenomic phenomic copied to clipboard

slash escaped with statically generated content

phenomic
phenomic copied to clipboard