Sign inSign up

jonmcquade/aspnetcore-react-redux

By jonmcquade

•Updated over 7 years ago

Boilerplate for C# ASP .NET Core 2.1 MVC SPA (debug and release) with TypeScript, React and Redux

Image
0

10K+

jonmcquade/aspnetcore-react-redux repository overview

⁠aspnetcore-react-redux

⁠! This project is no longer being updated. Future versions of ASP .NET may not support some React features !

⁠ASP.NET Core 2 MVC SPA boilerplate with JSON entpoints

⁠Hello from Jon in Tacoma, the toe of SEA_TAC, Zip **404
Tacoma Dome
⁠#WeBuildThingsHere

⁠In Action

http://dotnetcore-flightsearch.herokuapp.com/about⁠

⁠Docker Tags

https://hub.docker.com/r/jonmcquade/aspnetcore-react-redux/tags/⁠

⁠YouTube Guides (In Progress)

Installation Guide

⁠Table of Contents

⁠About this ASP .NET Core 2 SPA Template

⁠This project builds from the src directory.
  • Dockerized Boilerplate for C# ASP .NET Core 2.1 MVC SPA development, with Isomorphic React and Redux server and client-side rendering of React Components.
  • Develop, debug, build, publish and release .NET Core 2.1 ASP .NET apps without installing .NET locally, using pre-built Docker images running Linux Alpine.
  • This README.md file is dynamically loaded into the src/ClientApp/components/About component as a demonstration of a simple no-db CMS. When debugging locally in Development, you can access this same README within the app at http://localhost:5000/about⁠. Using docker-compose -f docker-compose.dev.yml up in the root directory, it can be accessed at http://localhost:8080/about⁠.
  • Library dependencies are the freshest versions as of 3/13/2018, including Microsoft .NET Core Runtime 2.1.0 Preview1 and aspnetcore2.1 targeting, with up-to-date and alpha package.json references.
  • API and microservices examples: Demonstration of CSV to ASP.NET Controller conversion, with JSON API for file I/O, seperate from the UI.
  • Demonstration of isomorphic design using ASP .NET Prerendering of React, Redux and React Router
  • Bootstrap 4 and Webpack 4 compatible frontend with React Hot Module Replacement when running locally. State is maintained between routes, inside of the Redux store. HMR using Docker is not yet resolved: file changes do not trigger a Webpack build.
  • ActionScript is moderately implemented, as to not scare off junior developers.

⁠NPM Automation Scripts
FileCommandEnvironmentAffect
package.jsonnpm run wp-vendorDevRuns Webpack on vendor files
package.jsonnpm run wpDevRuns Webpack on ClientApp files
package.jsonnpm run wp-vendor-prodProdRuns Webpack on vendor files
package.jsonnpm run wp-prodProdRuns Webpack on ClientApp files
package.jsonnpm installDevRuns dotnet restore then runs Webpack
package.jsonnpm publishProdRuns dotnet publish in Release mode
package.jsonnpm buildProdRuns dotnet build in Release mode
package.jsonnpm startDevRuns Webpack then runs dotnet run in Debug mode
package.jsonnpm run prodProdRuns Webpack then runs dotnet run in Release mode

⁠Project History
  • V1 (implementing .NET Core SDK 1) was developed in August 2017. V2 (implementing .NET Core SDK 2) was developed in March, 2018.

⁠What's in the box?

⁠Up and Running using Docker

⁠The easiest way to get started is to install docker on your machine. Once installed, run this command inside of the project's root (.) directory:
  • docker-compose -f docker-compose.dev.yml up
  • This will download the latest (:dev) build and create a container. npm install, as well as webpack packaging are initiated automatically before the server starts.
⁠When initial site caching has completed, open http://localhost:8080 in your browser.
⁠What happens when I run this?
  • Docker Compose is configured to pull a Dockerhub image to your machine named jonmcquade/aspnetcore-react-redux with the :dev tag.
  • You can also build your own version of the image using docker-compose -f docker-compose.dev.yml build in the project root (.) directory.
  • Docker Compose passes build arguments to the Dockerfile build configuration to create a (:dev) tagged image. dotnet restore is run during the build to pull down project dependencies. When the container runs, the entrypoint script is executed, then runs npm install and webpack commands inside the container to generate static site files.
  • Docker Compose runs the image in a container, mapping the host's 8080 port to the container's 3000 port.
  • The host's ./src folder is mapped to the container's /dotnetcorespa directory using shared volumes.
  • The Development build contains WebPack middleware to initiate Hot Module Replacement in most project files. As you save ClientApp files, Webpack will rebundle and inject the updates to the DOM without a need to refresh the page. This is currently broken using Docker but works when debugging locally (Runtime and SDK installed on host machine)
⁠Docker: To run a Production build and publish a self-contained executable
  • Install Docker⁠
  • Run the command below in the project (".") directory to publish a Production build of your app:
  • docker-compose build
  • The Dockerfile builds a base image of jonmcquade/aspnetcore-react-redux with a tag of latest. This image is much smaller than the :dev tag because it does not include the .NET Core 2 SDK. A standalone Production build only requires the .NET Core 2 Runtime Dependency libraries.
⁠Note

docker-compose -f docker-compose.dev.yml up creates a container named aspnetcore-react-redux-dev. You can run docker exec -ti aspnetcore-react-redux-dev shell to enter an interactive terminal into the running Docker Container that Docker Compose started. This way, you can run your shell commands directly in the Docker container, without needing to wrap your commands in the docker clr from your host.

⁠To develop locally without using Docker

⁠This app targets the .NET Core 2.1 Runtime. This was decided as a requirement due to the recent release of .NET Core 2.1 SDK and Runtimes using Docker images under Linux Alpine with an AMD 64-bit CPU. Linux Apline produces much smaller builds, which is perfect for microservice and SPA development.

⁠Requirements for local development
⁠Note

You don't have to debug or build from the Visual Studio IDE. The dotnet CLR is installed with the .NET SDK, which allows you to run dotnet build and dotnet publish commands. These are also called when running npm build or npm publish.

⁠

⁠Commands
⁠For Development
  • npm install from the src directory will run a dotnet restore as well as run webpack to create all required file resources.
  • npm start from the src directory will start a local instance of the Web app
⁠For Building and Publishing
  • Run dotnet build -c Release -o ./app to build the .NET libraries. This does not run npm install or webpack operations.
  • Run dotnet publish -c Release -o ./app to publish to the ./app directory. This performs npm install and webpack operations for you.
⁠The application will be available http://localhost:5000⁠
⁠Why the Preview release of Visual Studio?
  • The Preview version includes the ability to target the .NET Core 2.1 SDK and Runtime from within the IDE. However, you'll still need to install a newer version of the SDK in order to debug or build. Depending on your version of Visual Studio, you might not be able to target .NET Core 2.1 Runtime inside the IDE yet. In addition to targeting the framework, the framework must be installed locally when not using Docker.
  • You can modify the global.json and flightsearch.csproj project files to target a previous version of the .NET Core 2 runtime, such as the more-supported 2.0. 2.1 is a project requirement for Docker support, not for running or building locally. Changing the runtime version can cause undesired affects, has not been tested, and won't be supported at this time.
  • You can also run a build from within Visual Studio using the Build and Debug menus. Due to some .NET Core 2.1 features still existing in Preview releases, you may see errors in the IDE console/output window about not being able to target the .NET Core 2.1 runtime. Visual Studio 2017 Preview has resolved issues with targeting the .NET Core 2.1 runtime.

Tag summary

Content type

Image

Digest

Size

64.3 MB

Last updated

over 7 years ago

docker pull jonmcquade/aspnetcore-react-redux