Skip to content

Instantly share code, notes, and snippets.

Avatar
👀
waiting for the right opportunity

Vishnuprasad Venugopal ovpv

👀
waiting for the right opportunity
View GitHub Profile
@ovpv
ovpv / index.js
Created Aug 7, 2019
adding react router dom browser router to client side
View index.js
import React from "react";
import { hydrate } from "react-dom";
import App from "./app";
import { BrowserRouter as Router } from "react-router-dom";
hydrate(
<Router>
<App />
</Router>,
document.getElementById("app")
@ovpv
ovpv / server.js
Last active Aug 7, 2019
Routing in server.js
View server.js
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter as Router } from "react-router-dom";
import path from "path";
import App from "./client/app";
const app = express();
const port = 3000;
import Routes from "./routes";
@ovpv
ovpv / home.js
Created Aug 6, 2019
Home component for react ssr
View home.js
import React, { Component, Fragment } from "react";
export default class Home extends Component {
render() {
return (
<Fragment>
<p>this is Home</p>
</Fragment>
);
}
@ovpv
ovpv / routes.js
Created Aug 6, 2019
Defining routes file for react ssr
View routes.js
import Home from "./client/pages/home/home";
import About from "./client/pages/about/about";
import NotFound from "./client/pages/not-found/not-found";
const Routes = [
{
url: "/",
exact: true,
component: Home
},
@ovpv
ovpv / server.js
Created Aug 6, 2019
Serverside rendered react app
View server.js
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./client/app";
const app = express();
const port = 3000;
const HTML = (req, context) => {
const body = renderToString(<App />);
@ovpv
ovpv / index.js
Created Aug 6, 2019
Rendering app on client side with hydrate method
View index.js
import React from "react";
import { hydrate } from "react-dom";
import App from "./app";
hydrate(<App />,document.getElementById("app"));
@ovpv
ovpv / app.js
Created Aug 6, 2019
App component to be used in common by client and server side
View app.js
import React, { Component, Fragment } from "react";
export default class App extends Component {
render() {
return (
<Fragment>
<div>Hello World</div>
</Fragment>
);
@ovpv
ovpv / client - index.js
Last active Aug 6, 2019
React SSR client index file
View client - index.js
import React from "react";
import { hydrate } from "react-dom";
hydrate(
<div>Hello World</div>,
document.getElementById("app")
);
@ovpv
ovpv / package.json
Created Aug 4, 2019
React ssr package.json script
View package.json
"scripts": {
"start": "npm-run-all --parallel watch:build watch:server",
"watch:build": "webpack --watch",
"watch:server": "nodemon \"./server.js\" --watch \"./ \""
},
@ovpv
ovpv / src - server.js
Created Aug 4, 2019
react ssr server js hello world file
View src - server.js
import express from 'express';
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))