Code Monkey home page Code Monkey logo

isomorphic-react's Introduction

Isomorphic React

Updated 2021 Version

  • As of February 2021, the Jest Branch is now merged into the main branch of this project

A Starter Isomorphic React Application with All Best Practices and No Frills

image

About The Application

This application is a basic API client which gathers data from an outside API (in this case, Stackoverflow) and generates an isomorphic, single-page application (SPA).

Why Isomorphic React?

Great question!

  • Uses React / Redux as main application engine
  • Supports hot reloading and server rendering!
  • Uses React Router (in a combination with server rendering that is truly amazing)
  • No fluff, just the good stuff

Getting Started

  1. Clone the repository
  2. install dependencies npm install && npm run postinstall
  3. Run the dev server npm run start-dev
  4. Navigate to the application's url http://localhost:3000/

Usage

Enabling / Disabling Server Rendering

Server rendering is great, but sometimes we want to disable it when there's an error in our render and we'd rather troubleshoot it in the client. This setting is passed in as a CLI argument via the --useServerRender=true argument. You can modify this in package.json to --useServerRender=false which will disable any server-side rendering functionality.

Enabling / Disabling Live Data

This application is designed to grab the latest data from Stackoverflow.com. However, their API has a strict request limit which means that no questions will be returned after X requests (usually 300). Therefore, the application comes loaded with mock-questions in the data directory. To ease the learning process by eliminating potential sources of error, live data is disabled by default. However, you are strongly encouraged to use live data once you understand the associated pitfalls.

  • Note: You can increase your allotted requests to a much larger number by registering an application here, https://stackapps.com/apps/oauth/register and then appending the key to the URLs in data/api-real-url.js

Production Build

This application fully supports a production build setting, which disables live reloading in favor of precompiled and uglified JS, which boosts performance. To run production, run the command npm run start-prod, which automatically triggers the build script. This mode is recommended for production. However, this boilerplate has never been used in actual production so utilize caution if deploying as a real application.

Troubleshooting

unexpected token import

This error appears when babel is not configured correctly. This can actually be caused by outdated global dependencies, and is hard to fix. For best results, try the following -

  • Install babel-register as a local saved dependency
  • Update global versions of babel, webpack and all dependencies to latest / course versions

Any Error That is Taking a Long Time to Troubleshoot

Things can always go wrong in the world of programming. If this happens, clone the master branch of this repo to a new directory and run the installation instructions. If desired, you can work backwards, pruning extra files until you get the application in the state you want.

Problems with the Repo

I want this repo to work perfectly for as many users as possible. Got a problem? Open an issue! Let's figure out a solution together.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.