{"id":13394811,"url":"https://github.com/DavidWells/isomorphic-react-example","last_synced_at":"2025-03-13T20:31:43.387Z","repository":{"id":25151987,"uuid":"28574516","full_name":"DavidWells/isomorphic-react-example","owner":"DavidWells","description":"Deprecated! ReactJS + NodeJS ( express ) demo tutorial with video. Universal/Isomorphic JS = Shared JavaScript that runs on both the client \u0026 server.","archived":false,"fork":false,"pushed_at":"2017-10-30T23:30:46.000Z","size":1466,"stargazers_count":1687,"open_issues_count":20,"forks_count":272,"subscribers_count":66,"default_branch":"master","last_synced_at":"2024-10-29T20:00:16.345Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://davidwells.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DavidWells.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-28T23:54:20.000Z","updated_at":"2024-09-05T15:40:25.000Z","dependencies_parsed_at":"2022-07-16T00:00:40.029Z","dependency_job_id":null,"html_url":"https://github.com/DavidWells/isomorphic-react-example","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Fisomorphic-react-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Fisomorphic-react-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Fisomorphic-react-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Fisomorphic-react-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DavidWells","download_url":"https://codeload.github.com/DavidWells/isomorphic-react-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478204,"owners_count":20297211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:32.377Z","updated_at":"2025-03-13T20:31:42.817Z","avatar_url":"https://github.com/DavidWells.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","others"],"sub_categories":["Uncategorized"],"readme":"### What is Isomorphic/Universal JavaScript ?\n\nThere is a push to change the word [Isomorphic to Universal](https://medium.com/@mjackson/universal-javascript-4761051b7ae9). Whatever floats your boat!\n\nSee full post on [ReactJS News](http://reactjsnews.com/isomorphic-javascript-with-react-node/)\n\nShared JavaScript that runs on both the client \u0026 server.\n\n#### What's the point?\nJavaScript driven MVCs (angular, ember, backbone, etc.) render on DOM load, this can be really slowwwww \u0026 can make for a bad user experience.\n\nAnother major problem is that they aren't indexable by search engines (without paying $$ for a third party service like https://prerender.io/). If your app is serving any kind of data that people might be searching for, **this is a bad thing**.\n\nWhen you render JavaScript on the server side you can solve these problems and be super cool while doing so!\n\n####  Isomorphic Javascript Benefits:\n* Better overall user experience\n* Search engine indexable\n* Easier code maintenance\n* Free progressive enhancements\n\nI've built a live example of isomorphic JS for you to check out here: https://github.com/DavidWells/isomorphic-react-example\n\nThe demo uses the [griddle react](http://dynamictyped.github.io/Griddle/) component to show how you can have apps with large data sets indexed by search engines and thus easier to find by potential users in search engines.\n\n### Tutorial \u0026 Video!\n\nhttps://www.youtube.com/watch?v=8wfY4TGtMUo\n\nIn /server.js install the jsx transpiler:\n```js\n// Make sure to include the JSX transpiler\nrequire(\"node-jsx\").install();\n```\n\nThen change components to Node friendly syntax where you module.exports the component if it's in a seperate file\n\nAlso make sure to `React.createFactory` your component for it to be rendered server side\n```js\n/** @jsx React.DOM */\n\nvar React = require('react/addons');\n\n/* create factory with griddle component */\nvar Griddle = React.createFactory(require('griddle-react'));\n\nvar fakeData = require('../data/fakeData.js').fakeData;\nvar columnMeta = require('../data/columnMeta.js').columnMeta;\nvar resultsPerPage = 100;\n\nvar ReactApp = React.createClass({\n\n      componentDidMount: function () {\n        console.log(fakeData);\n\n      },\n\n      render: function () {\n\n        return (\n          \u003cdiv id=\"table-area\"\u003e\n\n             \u003cGriddle results={fakeData} columnMetadata={columnMeta} resultsPerPage={resultsPerPage} tableClassName=\"table\"/\u003e\n\n          \u003c/div\u003e\n        )\n      }\n\n  });\n\n/* Module.exports instead of normal dom mounting */\nmodule.exports.ReactApp = ReactApp;\n/* Normal mounting happens inside of /main.js and is bundled with browserify */\n```\n\nNow the magic happens with routes using `React.renderToString` inside /app/routes/coreRoutes.js:\n```js\nvar React = require('react/addons');\nvar ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);\n\nmodule.exports = function(app) {\n\n\tapp.get('/', function(req, res){\n    \t// React.renderToString takes your component\n        // and generates the markup\n\t\tvar reactHtml = React.renderToString(ReactApp({}));\n        // Output html rendered by react\n\t\t// console.log(myAppHtml);\n\t    res.render('index.ejs', {reactOutput: reactHtml});\n\t});\n\n};\n```\n\nThe `reactOutput` variable is then passed into the template:\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eReact Isomorphic Server Side Rendering Example\u003c/title\u003e\n    \u003clink href='/styles.css' rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\t\u003ch1 id=\"main-title\"\u003eReact Isomorphic Server Side Rendering Example\u003c/h1\u003e\n    \u003c!-- reactOutput is the server compiled React Dom Nodes --\u003e\n    \u003c!-- comment out reactOutput to see empty non indexable source in browser --\u003e\n    \u003cdiv id=\"react-main-mount\"\u003e\n      \u003c%- reactOutput %\u003e\n    \u003c/div\u003e\n\n\t\u003c!-- comment out main.js to ONLY see server side rendering --\u003e\n\t\u003cscript src=\"/main.js\"\u003e\u003c/script\u003e\n\n\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n### Notes:\n\nBecause the files are .js and not .jsx, the `React.createFactory` has to be used when including components. See why here: https://gist.github.com/sebmarkbage/ae327f2eda03bf165261\n\n### Demo Install Instructions\n\nIf you would like to download the code and try it for yourself:\n\n1. Clone the repo: `git@github.com:DavidWells/isomorphic-react-example.git`\n2. Install packages: `npm install`\n3. Launch: `node server.js`\n4. Visit in your browser at: `http://localhost:4444`\n5. To see serverside rendering, comment out main.js from the /views/index.ejs file. This will show what is rendered purely from the server side.\n\nBuild changes with `gulp`\n\n### Other Isomorphic Tutorials \u0026 Resources\n\n##### Server-Client with React\n* [Server/Client With React, Part 1: Getting Started](http://eflorenzano.com/blog/2014/04/09/react-part-1-getting-started/)\n* [Server/Client With React, Part 2: The Build System](http://eflorenzano.com/blog/2014/04/10/react-part-2-build-system/)\n* [Server/Client With React, Part 3: Frontend Server](http://eflorenzano.com/blog/2014/04/11/react-part-3-frontend-server/)\n\n##### Server Side rendering\n* [Server Side Rendering for ReactJS](http://yanns.github.io/blog/2014/03/15/server-side-rendering-for-javascript-reactjs-framework/)\n* [React Server Rendering](https://github.com/mhart/react-server-example)\n* [JDK8 + Facebook React: Rendering single page apps on the server](http://augustl.com/blog/2014/jdk8_react_rendering_on_server/)\n* [Server-side React with PHP – part 1](http://www.phpied.com/server-side-react-with-php/)\n* [Server-side React with PHP – part 2](http://www.phpied.com/server-side-react-with-php-part-2/)\n* [Server-rendered React components in Rails](http://bensmithett.com/server-rendered-react-components-in-rails/)\n\n### New to React? Check out these tutorials\n* [ReactJS For Stupid People](http://blog.andrewray.me/reactjs-for-stupid-people/)\n* [Flux For Stupid People](http://blog.andrewray.me/flux-for-stupid-people/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDavidWells%2Fisomorphic-react-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDavidWells%2Fisomorphic-react-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDavidWells%2Fisomorphic-react-example/lists"}