Book Image

ReactJS Blueprints

By : Sven A. Robbestad
Book Image

ReactJS Blueprints

By: Sven A. Robbestad

Overview of this book

<p>The JavaScript revolution has landed! ReactJS is one of those rare technologies that comes out of nowhere and turns established practices on their head. It provides a different way of thinking about how you should develop your apps, and has already gained a massive adoption among web developers. Join the revolution, build web apps faster, and have more fun developing!</p> <p>Packed with real-world code, this book starts by covering the idea behind ReactJS and the key concepts you must familiarize yourself with. You will learn how to bootstrap your ReactJS projects and you’ll also be provided with a handy scaffolding that you can use and reuse over and over.</p> <p>We then go on to cover a wide variety of apps, and will help you to structure and build your own components. Next, you will build a web shop, create a fully responsive and routable app, and also develop a real-time search app. Further on, you will be taught to work with public APIs to create a map-based application. You will also be taken through some advanced concepts such as <span id="description" class="sugar_field">Redux that are making a huge splash currently in the world of ReactJS. You’ll learn how to efficiently seal off your app for guest access, interact with hardware APIs, and create a photo app. You will then master the art of making your apps universal, and find out how to deploy them to the cloud. Finally, we wrap up the book as you are shown how to make a game. What better way to kick off your ReactJS development journey?</span></p>
Table of Contents (18 chapters)
ReactJS Blueprints
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Deploying a Webpack app to the cloud


In this section, we'll use the Webpack scaffold we developed in Chapter 6, Advanced React. We'll need to add a few packages and make some modifications.

As a reminder, this is the file structure of our scaffold before we start:

├── assets
│   ├── app.css
│   ├── favicon.ico
│   └── index.html
├── package.json
├── server.js
├── source
│   └── index.jsx
└── webpack.config.js

Let's start by renaming our server.js file to server-development.js. Then, create a new file called server-production.js in the root of the scaffold and add this code:

'use strict';

var path = require('path');
var express = require('express');
var serveStatic = require('serve-static')
var compression = require('compression')
var port = process.env.PORT || 8080;
var host = process.env.HOST || '0.0.0.0';

Here, we instruct the server to use the preconfigured variables for PORT and HOST or the default variables if these aren't provided, just as we did with the Browserify server. Then, we add...