barbar/vortigern

render on client side only

vasso1pupkishvilli opened this issue · 4 comments

vasso1pupkishvilli commented

Hi, please describe what configuration do we need to render on the client side only.
I mean without isomorphic server side rendering.
Thanks in advance.

altaywtf commented

Hello mate, you need to get rid of server related code and webpack configuration 😅

However, I'd suggest you to take your time and write a basic boilerplate for yourself instead of shredding this one.

Or you can take a look at these issues:

Have a nice day.

vasso1pupkishvilli commented

OK. But please describe the meaning of client.tsx file

hirako2000 commented

just

  1. replace the get part in server.tsx
    =>
app.get('*', (res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

so that it serves simple index.html page

  1. Add an html page, e.g at the root of src:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Some title</title>
  </head>
  <body>
  	<main id="app"></main>
  	<script src='/public/js/app.js'></script>
  </body>
</html>
  1. Import that index.html page from client.tsx

or, instead of 2) and 3), use html-webpack-plugin to generate an html like above from a template (cleaner).

  • 👍1
yaniving commented

I'm getting res.sendFile is not a function

`**const appConfig = require('../config/main');

import * as e6p from 'es6-promise';
(e6p as any).polyfill();
import 'isomorphic-fetch';

const express = require('express');
const path = require('path');
const compression = require('compression');
const Chalk = require('chalk');
const favicon = require('serve-favicon');

const app = express();

app.use(compression());

if (process.env.NODE_ENV !== 'production') {
const webpack = require('webpack');
const webpackConfig = require('../config/webpack/dev');
const webpackCompiler = webpack(webpackConfig);

app.use(require('webpack-dev-middleware')(webpackCompiler, {
publicPath: webpackConfig.output.publicPath,
stats: { colors: true },
noInfo: true,
hot: true,
inline: true,
lazy: false,
historyApiFallback: true,
quiet: true,
}));

app.use(require('webpack-hot-middleware')(webpackCompiler));
}

app.use(favicon(path.join(__dirname, 'public/favicon.ico')));

app.use('/public', express.static(path.join(__dirname, 'public')));

app.get('*', (res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});

app.listen(appConfig.port, appConfig.host, (err) => {
if (err) {
console.error(Chalk.bgRed(err));
} else {
console.info(Chalk.black.bgGreen(
\n\n💂 Listening at http://${appConfig.host}:${appConfig.port}\n,
));
}
});**`

any one ?