Giter Club home page Giter Club logo

pluralsight-course-react-aspnet-core's Introduction

Course Code for Building a Website with React and ASP.NET Core on Pluralsight

OTHER Recently Released Courses From Peter Kellner

Course Release Date
Using Hooks in React 18 November 2022
What is React August 2022
What's New in React 18 May 2022
Data and UI Patterns in React December 2021

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

This GitHub repo includes the final code for all the modules in the course that develop code. That is modules 2,3,5 and 6. Modules 1,4 and 7 do not have any code associated with them.

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-react-aspnet-core or download the zip
  3. **Set your default directory to which module you want (example: cd m6-add-rest-data-to-server-side-rendering - cd m6-add-rest-data-to-server-side-rendering
  4. Install Node Packages with Dependencies. - npm install
  5. **Run the web app - npm start Assuming you are in the m6-add-rest-data-to-server-side-rendering directory, this will launch the webpack-dev-server and put you in a browser window running the completed app.

Module Details

To run each of these scripts, cd into the appropriate direct ( example: m2-custom-webpack )

then run the script name as follows:

npm run start-dev

Module 2 - Building a Custom Webpack Configuration for React and Core

You can follow the progression of each section in this module by looking at soure code section by section.

See the /Progressions directory in the base of this repo for more details.

Details of each script in package.json are as follows:

Script Name Script Description
start-dev Launches webpack-dev-server to run browser
dev:build-server Builds the server side rendering react code
dev:build-client Builds the server side rendering react code
dev:server Runs the server side rendering code with node
dev:all Builds client and server javascript and launches node
cleanwwwroot removes all files from the ASP.NET Core wwwroot directory
copytowwwroot Copies all files from the build directory to the root of the ASP.NET Core app (/wwwroot)

Module 3 - Integrating Facebook’s create-react-app with ASP.NET Core

Details of each script in package.json are as follows:

Script Name Script Description
start-js Normal start but does not build SASS to CSS
start Includes building SASS files and running the React app
build Builds the production ready JavaScript bundle
test Runs all tests in the project (we did not cover this in the course)
build-css Compiles the SASS files into CSS
watch-css Monitors SASS files for changes and then builds new CSS
eject Removes Webconfig management. Expert feature only, copies all configuration files to root of project

Module 5 - Use REST Services from React to ASP.NET Core Endpoints

You can follow the progression of each section in this module by looking at soure code section by section.

See the /Progressions directory in the base of this repo for more details.

This module brings a newly configured ASP.NET Core server that started with an empty server. It ultimately creates a stand alone REST server that uses Entity Frameworks in memory database to supply data. The data comes from the real Silicon Valley Code Camp 2017 speaker and session data. Those JSON files representing that data are embedded as resources and loaded into Entity Framework when there are no other records in the database.

Script Name Script Description
start Runs the webpack-dev-server and the json-server for REST data locally
start:devplus same as start but let's you run it explicitly and not by default
start:dev Just runs webpack-dev-server by itself
dev:build-server Builds the server side rendering react code
dev:build-client Builds the server side rendering react code
dev:server Runs the server side rendering code with node
dev:all Builds client and server javascript and launches node
cleanwwwroot removes all files from the ASP.NET Core wwwroot directory
copytowwwroot Copies all files from the build directory to the root of the ASP.NET Core app (/wwwroot)
json-server Launches json-server by itself running with a Node Express server in code

Module 6 - Implementing Server Side Rendering That Includes REST Calls

(very similar scripts to module 5, just the code changes to support REST in html)

You can follow the progression of each section in this module by looking at soure code section by section.

See the /Progressions directory in the base of this repo for more details.

Script Name Script Description
webpackdev:server Runs the webpack-dev-server only
start Runs webpack-dev-server and the json-server
start:devplus runs in parallel start:dev and json-server
start:dev same as webpackdev:server
dev:build-server Builds the server side rendering react code
dev:build-client Builds the server side rendering react code
dev:server Runs the server side rendering code with node
dev:all Builds client and server javascript and launches node
cleanwwwroot removes all files from the ASP.NET Core wwwroot directory
copytowwwroot Copies all files from the build directory to the root of the ASP.NET Core app (/wwwroot)
json-server Launches json-server by itself running with a Node Express server in code

You can follow the progression of each section in this module by looking at soure code section by section.

See the /Progressions directory in the base of this repo for more details.

Configuration File (.env)

In modules 5 and 6, we introduce a configuration file (.env) that let's you specify whether our running in development or production. It also let's you set the base URL for the REST endpoint to pick up speakers and sessions.

The two choices for NODE_ENV are development or production. When set to development, the URL is retrieved from the corresponding environment variable JSONSERVER_RESTURL and when in production PROD_RESTURL.

By default, they are set to http://svcc-react1.azurewebsites.net/rest which happens to be the same ASP.NET Core web site used also in modules 5 and 6 (source code in ../WebApp).

You can see that data actually downloaded by hitting http://svcc-react1.azurewebsites.net/rest/speakers and http://svcc-react1.azurewebsites.net/rest/sessions.

pluralsight-course-react-aspnet-core's People

Contributors

pkellner avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

manish2020 vnvizitiu alphagamer7 crossphd markchipman benlorence reashore kevinmiles vcillusion azurecloudmonk memware161591 hitesh97 fatimatasnim rickiswright bkmediagroup-glic baharehniknia nareshkumarhimachalapathi ankith1461 anushan78 ioncojucovschi tvaccari34 ecseraspe borysr productinfo marcinszyszka eleriane giftakari ducoudray haidong-truong vuongvx96 ajaysharma201291 justinhachemeister avilamisc hartami master317 rajeshypatil stsma jiminyun coralchen1105 mahesh-anjani priyanperera pauloricardot bbollig zufre cmtek hanlinaunghack omobe jakeec texacalicoder bigbak lhesnadeemshaikh aharonyan-narek ali-shell inderjitebest romantic369 stormwild sakenk learntoteach yelenatph vinaykarode mpace95 akxreddy thbland leeohalloran sharmavishalvk trungnguyens93 danailstratiev riskaone jnowc rogasp svitlanastrembetska nolan-stidham stephan010 jun1wang athiwat liskovich mxaba kjka65 bulakenyo panghucui dlearner6975 nbusiness335 srouek henryoh007 paolosalvatori kadamrajgit obiemd5 enbeaa

pluralsight-course-react-aspnet-core's Issues

React-router config

Hi, sorry to post here but didn't know were else to report this.
In Adding React Router to the App step, I had to add to webpack.config.js the following:
devServer: {
contentBase: PUBLIC_DIR,
port: 9000,
open: true,
historyApiFallback: true,
}
If not, only the "/" router is loaded.
Thanks for the nice course

No 404 with server side rendering

Hi!

I just done the module "Building a Custom Webpack Configuration for React and Core".

When I tried if a 404 gets returned when entering an invalid URL into the browser, I always got 200 and no 404.
After some digging into the code I found out that with your implemntation rendererInstance.routestatus is always undefined when it gets checked in Server.js.

app.get('*', (req, res) => {
    const rendererInstance = Renderer(req);

    // rendererInstance is always undefined here
    if (rendererInstance.routestatus == 404) {
        res.status(404).end("Not found, 404 status returned");
    } else {
        res.send(Renderer(req).htmlcode);
    }
});

The problem is that because of the default route <Route render={() => <RouteNotFound />} /> is existing the router does always get a result.
I have tired to implement it like shown in the docs: click me

You can find the changed files here
With this solution, the server returns a 404 when an invalid request was given and also returns the styled error page.

I think this would be worth to get updated in the course.

Hello.js

in chapter 3 'Bring in React and Create the First Component'

I get an error with Hello.js, I fixed this by adding a reference to React as an import statement at the top

import React from 'react';

then I used:

class Hello extends React.Component {

maybe the react reference should inherit from the Client.js, not sure why you didn't have to do this in your code.

.Net Core json resource files

I added the json files, not as resx files.

I get an error in the xxxController.cs InitSpeakersData() function

string[] resources = assembly.GetManifestResourceNames();

this is blank when I create this solution, in your downloaded code it works.

How did you add the files so they show up as embedded resources?

m2-custom-webpack Carousel does not compile

In

m2-custom-webpack/ClientApp/Components/home/HomeSpeakersCarousel.js

change line 3

export default function HomeSpeakersCaurosel() {

to

export default function HomeSpeakersCarousel() {

How does the SSR work in chapter 3?

I watched the video but not sure I understand how SSR works with Asp .Net integration. the WWWRoot serves the initial request, how does it get rendered by the server? The express server needs to be up? How does the request get handled by express when the request was initially sent to asp .net server?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.