Not Found for the first time after server is started.
ashutoshgoibibo opened this issue · 5 comments
koa-hbs@next returns 'Not Found' for the first time render is called after server restarts.
please provide a sample app which duplicates that behavior.
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.
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.
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.
No problem. Glad you were able to work it out.