/pluralsight-course-server-side-rendered-react-nextjs

This is the repository associated with the Pluralsight course "Building Server-side React Apps"

Primary LanguageJavaScriptMIT LicenseMIT

pluralsight-course-server-side-rendered-react-nextjs

The master branch here is the latest updates to the Pluralsight course published by Peter Kellner in December of 2018 in the master branch.

Course on Pluralsight: https://app.pluralsight.com/library/courses/building-server-side-rendered-react-apps-beginners

This GitHub repo includes source for all modules of the course that involve code.

Before you start, you should install node on either your Windows or Mac computer (those are the two environments that are tested). Below, in "Getting Started" are the basics to get module 6 up and running as fast as possible.

Getting Started

  1. Install Node 10.1.0 with NPM 5.6.
  2. Clone this repository. - git clone https://github.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs or download the zip
  3. **Set the default directory to which module you want (example: cd m3-Building-Data-Driven-SSR-App/I-NextJS-GetInitialProps - cd m3-Building-Data-Driven-SSR-App/I-NextJS-GetInitialProps
  4. Install Node Packages with Dependencies. - npm install
  5. Install this chrome extension for viewing performance data (optional).
  6. **Run the web app - npm run dev

How to Use This Repo While Watching the Course

Special Note: Many examples require your local json server be running. If you get an error including "map" it means the data array trying to be mapped over does not exist. Remember you need to start the json-server by typing npm run json-server

It is suggested that you clone or download this repository to your local computer while you are watching the course. If you are planning on watching the course without coding along, this will give you a nice view into the source files for every clip and what the completed files look like at the end of that module.

If, you plan on coding along, there are parts in the course where it will be helpful to be able to cut and paste code from the completed modules to continue. For things like css and other assets, you will need to copy those into your working project to continue. Having the source downloaded and along side your project will be very helpful.

Table of Contents

Learning the Fundamentals (Module 3)

Using REST Data in Server-side React Apps (Module 4)

Extending Server-side Rendered React App to the Real World (Module 5)

Deploy Server-side Rendered React App to Node.js (Module 6)

Ensuring the React App Performs (Module 7)

Module Details

To run each of these scripts, cd into the appropriate direct ( example: m3-Building-Data-Driven-SSR-App/I-NextJS-GetInitialProps )

then run the script name as follows:

npm run dev

Course Preview

Experimental Directories

In several modules, you may see a directory named _experimental. The project in this directory may or may not be working. It may contain test files or work in progress files for other students. You can ignore that directory whenever you see it.