A .NET Core 2.1 app with React and a few other helpful add-ons for rapid iteration prototyping
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
sampleApp
.gitignore
LICENSE
README.md
_config.yml
setup-prerequisites.ps1
setup-prerequisites.sh

README.md

reddi-dotnet-react-app

This template packs alot of modules in together, and tweaks the configuration so that they work well with each other, which doesn't happen automatically if you just yarn add each one. The packages included are:

  1. .NET Core 2.1 Web App (API/back-end)
  2. React (front-end)
  3. React Router (routing)
  4. Emotion (for enabling testable styled components while keeping close to CSS notation)
  5. Storybook (visual interaction design)
  6. Jest (TDD and RDD (readme driven development))
  7. Enzyme (visual behavior testing)

Specifically I added the packages that I believe make better rapid prototyping and testing possible when discovering how an application should behave for the target user and there is a lot of volatility in the expected front-end behaviour as requirements change or adjust based on feedback received from demoing the actual application interactions.

Requirements

  1. ASP.Net Core 2.1 SDK installed
  2. Node.js and the create-react-app generator
  3. A code editor. For this project I used Visual Studio Code but any will do
  4. [Optional]fira code font which works nicely if you enable ligatures in VSCode

Quick setup of requirements

If you already have the above tooling, want to set the tooling up on your own, or don't want to learn more about how the pieces are put together, skip this seciton and go straight to Getting started You can quickly setup the requirements by running the

setup-prerequisites.sh

for Mac or

setup-prerequisites.ps1

on Windows in an Administrator PowerShell and that will download and install requirements for you, as well as create the skeleton application with the needed packages added.

There are a series of gist files that then show off the individually configured or additional files that are different from the default create-react-app files generated after running the setup-prerequisites script.

If you'd like to copy my own VSCode customized settings as well in your editor, install the Settings Sync plugin to VSCode and download my cloudSettings gist as your own using Settings Sync.

Getting started

Clone the repository, and from the SampleApp directory, run

dotnet run

from within the SampleApp folder. (This will automatically run dotnet restore to restore missing packages if required)

To run Storybook, run

yarn run storybook

from within the ClientApp folder

To run Jest tests, run

yarn test

from within the ClientApp folder. Note on Mac OSX watchman was added in setup-prerequisites.sh to prevent an error specific to create-react-app generated projects occurring when yarn test is run. Reference to this issue can be found here

Additional support tutorials.