Gain insights into building applications using Rails Webpacker, Webpack, and TypeScript. Explore Stimulus, React, state management, and communication with servers for richer interactions.

railspostgresssl.tar.gz

introduction/01

introduction/02

introduction/03

introduction/04

introduction/05

introduction/06

stimulus/01

stimulus/02

stimulus/03

stimulus/04

stimulus/05

stimulus/06

react/01

react/02

react/03

react/04

css/01

css/02

css/03

server/01

server/02

server/03

server/04

server/05

server/06

state/01

state/02

state/03

state/04

state/05

state/06

adv_types/01

adv_types/02

adv_types/03

testing/01

testing/03

all_stimulus/01

all_react/01

introduction/01_testing

testJob

introduction/01-copy

introduction/02-copy

introduction/03-copy

introduction/04-copy

introduction/05-copy

introduction/06-copy

stimulus/01-copy

stimulus/02-copy

stimulus/03-copy

stimulus/04-copy

stimulus/05-copy

stimulus/06-copy

react/01-copy

react/02-copy

react/03-copy

react/04-copy

css/01-copy

css/02-copy

css/03-copy

server/01-copy

server/02-copy

server/03-copy

server/04-copy

server/05-copy

server/06-copy

state/01-copy

state/02-copy

state/03-copy

state/04-copy

state/05-copy

state/06-copy

adv_types/01-copy

adv_types/02-copy

adv_types/03-copy

all_stimulus/01-copy

introduction/01-copy-r0guf3

react/02-copy-copy

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.

To kick things off, you’ll walk through the basics of getting Rails set up to use Webpacker which will serve JavaScript and CSS to the browser. You’ll then get acquainted with Stimulus and React which will help with creating richer interactions.

In the latter half, you’ll work with TypeScript and set up communication between a server. Beyond that, you’ll work through managing state in your Stimulus code, as well as how to test and troubleshoot your application.

By the end of this course, you will be well equipped to create larger, more complex applications that make use of modern tools.

Modern Front-end Development for Rails

## The basics

The code uses Ruby version 2.7.1, although use of 2.7 features should be minimal, and we think anything from 2.6.0 and up should work. We recommend installing a Ruby version manager such as [RVM](https://rvm.io), [rbenv](https://github.com/rbenv/rbenv), or [chruby](https://github.com/postmodern/chruby).

The code uses [PostgreSQL](https://www.postgresql.org/download), so you'll need to have that set up on your machine. And you'll need [Node](https://nodejs.org/en/download) (version 10 or 12 should work)  and [Yarn](https://yarnpkg.com/getting-started/install) (version 1.22; the 2.0 version doesn't work with Webpacker yet) to help set up the Node packages.

We're also assuming that you are broadly familiar with setting up Rails and its connection to the PostgreSQL database.

## The code
If you'd like to follow along with the application throughout the course, you can download the sample code files from the course page on the [Pragmatic Bookshelf website](https://pragprog.com/book/nrclient).


The sample code is split into a number of different directories, each corresponding to a different stage of the app in the course. Examples in the course will specify which directory is being used at any time.


If you download the code and run `bin/setup` within the `introduction/01` directory (or any of the individual application directories), it will do the following:

* Install bundler
* Run a `bundler install`
* Run `rails db:setup`
* Run `rails restart`


With the app set up and the main branch running, you run it using `rails s`, and hit [http://localhost:3000](http://localhost:3000). You'll see the schedule page, with a bunch of dates at the top, a search field in the middle, and a lot of schedule information at the bottom, with each scheduled day having an ugly button labeled "Hide."


 If you click on any of the concert names, you'll be taken to a concert page that shows basic data as well as a grid of sets for the show. Neither of these pages has any interactivity at the moment.



If you want to keep following along, each separate step in the application is a different directory in the sample code download, and you can move from one to another to see the entire application at different steps.


## Installing and using Redux

We first need to install Redux, the Redux bindings for React, and their associated type definitions:


~~~session
$ yarn add redux react-redux @types/redux @types/react-redux
~~~

# The basics

The code uses Ruby version 2.7.1, although use of 2.7 features should be minimal, and we think anything from 2.6.0 and up should work. We recommend installing a Ruby version manager such as [RVM](https://rvm.io), [rbenv](https://github.com/rbenv/rbenv), or [chruby](https://github.com/postmodern/chruby).

The code uses [PostgreSQL](https://www.postgresql.org/download), so you'll need to have that set up on your machine. And you'll need [Node](https://nodejs.org/en/download) (version 10 or 12 should work)  and [Yarn](https://yarnpkg.com/getting-started/install) (version 1.22; the 2.0 version doesn't work with Webpacker yet) to help set up the Node packages.

We're also assuming that you are broadly familiar with setting up Rails and its connection to the PostgreSQL database.

# The code
If you'd like to follow along with the application throughout the course, you can download the sample code files from the course page on the [Pragmatic Bookshelf website](https://pragprog.com/book/nrclient).


The sample code is split into a number of different directories, each corresponding to a different stage of the app in the course. Examples in the course will specify which directory is being used at any time.


If you download the code and run `bin/setup` within the `introduction/01` directory (or any of the individual application directories), it will do the following:

* Install bundler
* Run a `bundler install`
* Run `rails db:setup`
* Run `rails restart`


With the app set up and the main branch running, you run it using `rails s`, and hit [http://localhost:3000](http://localhost:3000). You'll see the schedule page, with a bunch of dates at the top, a search field in the middle, and a lot of schedule information at the bottom, with each scheduled day having an ugly button labeled "Hide."


 If you click on any of the concert names, you'll be taken to a concert page that shows basic data as well as a grid of sets for the show. Neither of these pages has any interactivity at the moment.



If you want to keep following along, each separate step in the application is a different directory in the sample code download, and you can move from one to another to see the entire application at different steps.


# Installing and using Redux

We first need to install Redux, the Redux bindings for React, and their associated type definitions:


~~~session
$ yarn add redux react-redux @types/redux @types/react-redux
~~~

In this lesson, let's look at the dependencies we need to run the code in this course locally.

Installation

Getting Started

Client-side Rails

Stimulus

React

Book Review System Using ReactJS and Ruby on Rails

Cascading Style Sheets

TypeScript

Webpack

Webpacker

Talking to the Server

Managing State in Stimulus Code

Managing State in React

Using Redux to Manage State

Validating Code with Advanced TypeScript

Testing with Cypress

More Testing and Troubleshooting Basics

Appendix

Installation

The basics