Mastering Full-Stack React Web Development by Dyl, Tomasz -- Read -- Imperial Library of Trantor

Index

Preface

What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Downloading the color images of this book Errata Piracy Questions

Configuring Full-Stack with Node.js, Express.js, MongoDB, Mongoose, Falcor, and Redux

More about our technical stack Environment preparation NVM and Node installation MongoDB installation

Robomongo GUI for MongoDB Running MongoDB and viewing our collections in the Robomongo GUI Importing the first example collection into the database Importing the articles to MongoDB Server setup with Node.js and Express.js

Working on our server (server.js)

Mongoose and Express.js A summary of how to run the project

Redux basic concepts

The single immutable state tree Immutability - actions and state tree are read-only Pure and impure functions The reducer function First reducer and webpack config

The rest of the important dependencies installation and npm dev script

Working on src/app.js and src/layouts/PublishingApp.js Wrapping up React-Redux application Finishing our first static publishing app

Falcor's basic concepts What is Falcor and why do we need it in our full-stack publishing app?

Tight coupling and latency versus one model everywhere No more tight coupling on client and server side Client-side Falcor A summary of client-side Falcor + Redux Moving Falcor's model to the backend Configuring Falcor's router (Express.js) Second route for returning our two articles from the backend Final touch to make full-stack Falcor run Adding MongoDB/Mongoose calls based on Falcor's routes

Double-check with the server/routes.js and package.json

Our first working full-stack app

Summary

Full-Stack Login and Registration for Our Publishing App

Structure of JWT token New MongoDB users collection

Explanation Importing the initPubUsers.js file into MongoDB

Working on the login's falcor-route

Creating a falcor-router's login (backend) How the call routes work

Separating the DB configs - configMongoose.js

Explanation Improving the routes.js file Explanation Checking to see if the app works before implementing JWT Creating a Mongoose users' model Explanation Implementing JWT in the routesSession.js file Explanation Successful login on falcor-route Explanation

Frontend side and Falcor

The CoreLayout component The LoginView component A root's container for our app Remaining configuration for configureStore and rootReducer Last tweaks in layouts/PublishingApp.js before running the app Last changes in src/app.js before running the app Screenshots of our running app

Home page Login view

Working on the login form that will call the backend in order to authenticate

Working on LoginForm and DefaultInput components Explanation LoginForm and making it work with LoginView Improving the src/views/LoginView.js

Making DashboardView's component

Finishing the login's mechanism

Handling successful logins in the LoginView's component

Explanation A few important notes about DashboardView and security

Starting work on the new editor's registration

Adding register's falcor-route Explanation

Frontend implementation (RegisterView and RegisterForm)

RegisterView

Summary

Server-Side Rendering

When the server side is worth implementing

Mocking the database response The handleServerSideRender function Double-check server/server.js Frontend tweaks to make the server-side rendering work

Summary

Advanced Redux and Falcor on the Client Side

Focusing on the app's frontend

Backend wrap-up before frontend improvement Improving handleServerSideRender Changing routes in Falcor (frontend and backend) Our website header and articles list need improvements

New ArticleCard component

Dashboard - adding an article button, logout, and header improvements

Important note before creating a frontend add article feature

The AddArticleView component Modifying DashboardView Starting work on our WYSIWYG Stylesheet for the draft-js WYSIWYG

Coding a draft-js skeleton

Improving the views/articles/AddArticleView component Adding more formatting features to our WYSIWYG Pushing a new article into article reducer

MapHelpers for improving our reducers The CoreLayout improvements Why Maps over a JS object? Improving PublishingApp and DashboardView

Tweaks to AddArticleView The ability to edit an article (the EditArticleView component) Let's add a dashboard link to an article's edition Creating a new action and reducer Edit mode in src/components/articles/WYSIWYGeditor.js

Improvements in EditArticleView

EditArticleView's render improvements

Deleting an article's feature implementation Summary

Falcor Advanced Concepts

The problem that Falcor aims to solve

Virtual JSON - one model everywhere

Falcor versus Relay/GraphQL

Big-picture similarities Technical differences - overview

Improving our application and making it more reliable Securing the auth required routes

JSON Graph and JSON envelopes in Falcor

Improving our Falcor code on the frontend

Improving server.js and routes.js

Falcor's sentinel implementation

The $ref sentinel Detailed example of the $ref sentinel Improving our articles' numberOfLikes with $ref Practical use of $ref in our project Mongoose config improvements The server/routes.js improvements JSON Graph atoms Improving the articles[{integers}] route New route in server/routes.js: articles.add Frontend changes in order to add articles Important note about route returns Full-stack - editing and deleting an article Deleting an article Frontend - edit and delete

Securing the CRUD routes

The $error sentinel basics DRY error management on the client side Tweaks - FalcorModel.js on the frontend Backend implementation of the $error sentinel Testing our $error-related code Cleaning up $error after a successful test

Wrapping up the routes' security

What routes to secure

Summary

AWS S3 for Image Upload and Wrapping Up Key Application Features

AWS S3 - an introduction

Generating keys (access key ID and secret key) IAM Setting up S3 permissions for the user Coding the image upload feature in the AddArticleView Environment variables in Node.js Improving our Mongoose article schema Adding routes for S3's upload Creating the ImgUploader component on the frontend Wrapping up the ImgUploader component AddArticleView improvements Some remaining tweaks for PublishingApp, ArticleCard, and DashboardView

Improving the ArticleCard component Improving the DashboardView component

Editing an article's cover photo Adding the ability to add/edit the title and subtitle of an article AddArticleView improvements Ability to edit an article title and subtitle ArticleCard and PublishingApp improvements Dashboard improvement (now we can strip the remaining HTML)

Summary

The MongoDB Deployment on mLab

mLab overview Replica set connections and high availability

MongoDB failover

Free versus paid plan in mLab

The new mLab's account and node

Creating the database's user/password and other configurations Config wrap up Summary

Docker and the EC2 Container Service

Docker installation with Docker Toolbox

Docker Hub - an hello world example

Dockerfile example

Modifications to our codebase in order to create it Working on the publishing app Docker image Building the publishing app container Running the publishing app container locally

Debugging a container Pushing a Docker container to a remote repository A summary of useful Docker commands Introduction to Docker on AWS EC2

Manual approach - Docker on EC2 Basics - launching an EC2 instance SSH access via PuTTy - Windows users only Connecting to an EC2 instance via SSH Basics of ECS - AWS EC2

Working with ECS

Step 1 - creating a task definition Step 2 - configuring the service Step 3 - configuring the cluster Step 4 - reviewing Launch status Finding your load balancer address AWS Route 53

Summary

Continuous Integration with Unit and Behavioral Tests

When to write unit and behavioral tests React conventions

Karma for testing

How to write unit and behavioral tests

What is Mocha and why do you need it?

Testing CoreLayout step-by-step

Continuous integration with Travis

Summary

← Prev
Back
Next →

← Prev
Back
Next →