Name: converter-react
Owner: Formidable
Description: Sample React + Flux app w/ server-side rendering / data bootstrap and more!
Created: 2015-04-30 15:44:06.0
Updated: 2017-05-10 03:05:41.0
Pushed: 2016-11-07 20:47:19.0
Homepage: http://converter-react.formidablelabs.com/
Size: 184
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A simple app written using React and CommonJS, built with Webpack. Based on full-stack-testing.formidablelabs.com/app/ from our “Full. Stack. Testing” training project.
The converter app has a simple Express-based REST backend that serves string conversions. The frontend app is a React app, crafted with the following:
See the app hard at work!
127.0.0.1:3000/: Server-side bootstrap, then client-side.127.0.0.1:3000/?__mode=noss: Pure client-side.127.0.0.1:3000/?__mode=nojs: Pure server-side.To test out how optimized the build is, here are some useful curl commands:
n production build
m run build
nified size
-c dist/js/*.js
6748 dist/js/bundle.d3749f460563cd1b0884.js
nified gzipped size
ip -c dist/js/*.js | wc -c
7748
For a deeper dive, see: DEVELOPMENT
Install, setup.
m install # Install dependencies
m run install-dev # Install dev. environment (selenium, etc.).
Run the watchers, dev and source maps servers for the real production build:
m run prod
Run the watchers and the Webpack dev server:
m run dev
Run the watchers and the Webpack dev server w/ React hot loader:
m run hot
Ports various servers run on:
2992: Webpack dev server for dev. server.3000: Development application server.3001: Sourcemaps static server / test (in-browser) server.3010: Webpack dev server for ephemeral client
Karma tests run one-off with full build.3020: Ephemeral app server for REST server tests.
Override via TEST_REST_PORT environment variable.3030: Ephemeral app server for functional tests.
Override via TEST_FUNC_PORT environment variable.3031: Webpack dev server for ephemeral functional
tests run one-off with full build.
Override via TEST_FUNC_WDS_PORT environment variable.URLS to test things out:
127.0.0.1:3000/: Server-side bootstrap, then JS.127.0.0.1:3000/?__mode=noss: Pure JS.127.0.0.1:3000/?__mode=nojs: Pure
server-side. Note that while some links may work (e.g. clicking on a note
title in list), many things do not since there are absolutely no JS libraries.
This is intended to just be a small demo of SEO / “crawlable” content.
This mode is incompatible with the React hot loader mode because in hot mode
JS is used to load CSS. If you want to run a development server while using
nojs, use npm run dev.As a development helper, we allow a querystring injection of data to bootstrap the application off of. Normally, you wouldn't allow users to add this, and instead would choose how to best bootstrap your app.
127.0.0.1:3000/?__bootstrap=camel:hello%20there:
Server-side data bootstrapped into the application + render.127.0.0.1:3000/?__mode=noss&__bootstrap=camel:hello%20there:
Pure client-render, but bootstrap the store off types and values and
initiate async fetch to backend for data automatically.127.0.0.1:3000/?__mode=nojs&__bootstrap=camel:hello%20there:
Pure server-side render with no JS. Should fully render the inputs and
converted values in static HTML.Install, setup.
m install --production
m run build
Run the server.
DE_ENV=production node server/index.js
Please see CONTRIBUTING