{"id":13394835,"url":"https://github.com/spikebrehm/isomorphic-tutorial","last_synced_at":"2025-04-12T18:49:15.171Z","repository":{"id":11454707,"uuid":"13916323","full_name":"spikebrehm/isomorphic-tutorial","owner":"spikebrehm","description":"Tutorial app to demonstrate isomorphic JavaScript concepts.","archived":false,"fork":false,"pushed_at":"2016-03-29T16:58:52.000Z","size":689,"stargazers_count":1336,"open_issues_count":14,"forks_count":141,"subscribers_count":68,"default_branch":"master","last_synced_at":"2024-10-30T02:36:06.444Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/spikebrehm.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":"2013-10-28T03:56:36.000Z","updated_at":"2024-09-02T16:19:31.000Z","dependencies_parsed_at":"2022-08-19T10:01:46.151Z","dependency_job_id":null,"html_url":"https://github.com/spikebrehm/isomorphic-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spikebrehm%2Fisomorphic-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spikebrehm%2Fisomorphic-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spikebrehm%2Fisomorphic-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spikebrehm%2Fisomorphic-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spikebrehm","download_url":"https://codeload.github.com/spikebrehm/isomorphic-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618218,"owners_count":21134199,"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:33.262Z","updated_at":"2025-04-12T18:49:15.142Z","avatar_url":"https://github.com/spikebrehm.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Isomorphic JavaScript Tutorial\n===================\n\nThis is a small sample app built to demonstrate isomorphic JavaScript concepts.\n\n\n## Overview\n\nHere we've built the minimum-viable example of an isomorphic JavaScript app: an\napp that can run on both client and server. Check out my\n[blog post](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)\non isomorphic JavaScript for some background.\n\nThis is a simple Express \"blog\" app that lists blog posts. Each page is fully\nrendered on the server, however upon subsequent navigation, we use the HTML5\nHistory API, aka `pushState`, to fetch the data for that page from the API and\nrender the HTML client-side using React.\n\n## Under the hood\n\nWe combine a few modules together to build an isomorphic JavaScript app. Each\nof these modules was built to support both the client and the server, and by\ncreating some small shims around them, we can abstract out the differences to\ncreate the same API for both client and server.\n\nWe use the following modules on both client and server:\n\n* [React](https://github.com/facebook/react) (UI components)\n* [Director](https://github.com/flatiron/director) (routing)\n* [Superagent](https://github.com/visionmedia/superagent) (HTTP requests)\n\nOn top of a basic [Express](https://github.com/visionmedia/express) app.\n\nWe use [Browserify](http://browserify.org/) and [Grunt](http://gruntjs.com/) to\npackage our server-side CommonJS modules in a way that allows us to use them in\nthe client-side.\n\n## Getting it running\n\n### Install Node.js \u003e= 0.10.x\n\nIf Node.js version \u003e= 0.10.x is not already installed on your system, install it so you can run this app.\n\n#### Check if it's installed\n\nThe command `which node` will return a path to your installed version of Node.js, if it exists on your system.\n\n    $ which node\n    /usr/local/bin/node\n\nIf it is installed, make sure it's \u003e= 0.10.x.\n\n    $ node --version\n    v0.10.33\n\n#### To install\n\n##### Mac\n\nPreferably install using Homebrew:\n\n    $ brew install node\n\n##### Else\n\nOtherwise, go to the [nodejs.org](http://nodejs.org/) and download the binary to install on your system.\n\n### Install `grunt-cli`\n\nThis app uses [Grunt](http://gruntjs.com/) to build its assets. To run Grunt, we need to install the `grunt-cli` package globally on your system using NPM.\n\n    $ npm install -g grunt-cli\n\n### Clone this repo onto your machine\n\n    $ cd ~/code\n    $ git clone git@github.com:spikebrehm/isomorphic-tutorial.git\n    $ cd isomorphic-tutorial\n\n### Run `npm install` to install dependenices\n\n\t$ npm install\n\tnpm http GET https://registry.npmjs.org/superagent\n\tnpm http GET https://registry.npmjs.org/handlebars\n\tnpm http GET https://registry.npmjs.org/director\n    ...\n\n### Run the app!\n\nWe'll start up our local Node.js web server using Grunt, so it can automatically do useful things for us when we change files like recompile our assets and restart the server.\n\n    $ grunt server\n\nThis will start our local web server on port `3030`.\n\nYou can view it in your web browser at `http://localhost:3030/`\n\n## Adding features\n\nNow that you've got it running, you can start adding some features to get to know the problem space better.\n\nWe've got some branches you can check out that show how to add certain features.\n\n### Adding the Moment library for date formatting\n\n[compare to master](https://github.com/spikebrehm/isomorphic-tutorial/compare/moment)\n\nThis branch adds the [Moment](http://momentjs.com/) date formatting library for use on the `/posts/:id` page.\n\n### Use Marked library to add Markdown to posts\n\n[compare to master](https://github.com/spikebrehm/isomorphic-tutorial/compare/markdown)\n\nThis branch adds the [Marked](https://github.com/chjj/marked) library to allow\nformatting of blog post bodies in Markdown, in just a few lines of code.\n\n### Create a route for adding posts\n\n[compare to master](https://github.com/spikebrehm/isomorphic-tutorial/compare/posts-new)\n\nCreate a page with a form at `/posts/new`, which POSTs to the `/api/posts.json` endpoint.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspikebrehm%2Fisomorphic-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspikebrehm%2Fisomorphic-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspikebrehm%2Fisomorphic-tutorial/lists"}