Not Found for the first time after server is started.

[ashutoshgoibibo]

koa-hbs@next returns 'Not Found' for the first time render is called after server restarts.

[Andrew Powell]

please provide a sample app which duplicates that behavior.

[ashutoshgoibibo]

Node version 7.6.0,
Node servers started with babel-register-cli.

import Koa from 'koa';
import serve from 'koa-static';
import createLocation from 'history/lib/createLocation';
import { RouterContext, match } from 'react-router';
import { renderToStaticMarkup } from 'react-dom/server';
import { Provider } from 'react-redux';
import compress from 'koa-compress';
import zlib from 'zlib';
import thunk from 'redux-thunk';
import {
      createStore,
      applyMiddleware
} from 'redux';
import React from 'react';
import hbs from 'koa-hbs';
import messages from '../src/locale/en.json';
import reducers from '../src/redux/reducer';
import {
      loadTranslations,
      setLocale,
      syncTranslationWithStore
} from 'react-redux-i18n';

import routes from '../src/routes';

var app = new Koa();
app.use(hbs.middleware({
      viewPath: __dirname + '/../dist/views'
}));
app.use(compress({flush: zlib.Z_SYNC_FLUSH}));
app.use(serve(__dirname + '/../dist'));

app.use( async (ctx) => {

      let location = createLocation(ctx.url);
      const language = ctx.headers['accept-language'] || 'en-US,en;q=0.8';
      const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
      let translationObject = {
            [languageWithoutRegionCode]: messages,
          };
      const store = applyMiddleware(thunk)(createStore)(reducers);
      syncTranslationWithStore(store);
      store.dispatch(loadTranslations(translationObject));
      store.dispatch(setLocale(languageWithoutRegionCode));
      match({ routes, location }, async (error, redirectLocation, renderProps) => {

            // 1. load data
            if (redirectLocation) {
              ctx.redirect(redirectLocation.pathname + redirectLocation.search);
            } else if (error) {
              ctx.throw(500, error.message);
            } else if (renderProps == null) {
              ctx.throw(404, 'Not Found');
            } else {

              const appHTML = renderToStaticMarkup(
                    <Provider store={store} key="provider">
                              <RouterContext {...renderProps} />
                        </Provider>
              );
                  try {
                        console.log("hai");
                        await ctx.render("index", {
                              html: appHTML,
                              InitialState: JSON.stringify(store.getState()).replace(/</g, '\\u003c')
                        });
                  } catch (err) {
                        console.log(err);
                  }
            }
          });
    });

export default app;

index.hbs is a simple file and already available in views folder.

[Andrew Powell]

Not sure why based on the code you've pasted. If you can provide a link to a repo, maybe someone can help debug it. It's definitely not a pervasive problem, or none of the tests (or any of the many apps that use this) would run successfully.

My guess is that it's a combination of your business logic and how you're leveraging react. I'm not a react user, so I can't help you there. I'd roll things back to a known working basic setup and step forward from there to triage.

[ashutoshgoibibo]

I am Sorry the issue was not because of koa-hbs but because of koa default status 404.
Koa does not wait for match function to finish in above code and just return its default value, so I just wrapped match into a promise and added await in front of it.

I debugged koa-hbs and found out it was returning the expected result.

Thanks for your time, and sorry as I reached at wrong conclusion about the issue.

[Andrew Powell]

No problem. Glad you were able to work it out.