Skip to content
Cross-platform web development with Visual Studio Code, C#, F#, JavaScript, ASP.NET Core, EF Core, React (ReactJS), Redux, Babel. Single-page application boilerplate.
JavaScript C# CSS
Branch: master
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 Update client app example; integrate assets webpack plugin Jun 6, 2016
client.test Refactor build automation to use single file (run.js) Jun 28, 2016
client Update npm dependencies (#43) Jul 8, 2017
docs
public Update client app example; integrate assets webpack plugin Jun 6, 2016
server.test Upgrad .NET Core to 1.1.1 with .csproj; upgrade packages etc (#31) Apr 3, 2017
server
.editorconfig Refactor to use .NET Core (#7) Jun 2, 2016
.gitattributes Update README.md Jun 15, 2016
.gitignore Update `node run` script, router.js and routes-loader.js Jul 20, 2016
.travis.yml Upgrad .NET Core to 1.1.1 with .csproj; upgrade packages etc (#31) Apr 3, 2017
CONTRIBUTING.md Add a contributing guide Jun 16, 2016
LICENSE.txt Refactor to use .NET Core (#7) Jun 2, 2016
README.md Update README.md Jun 20, 2017
jsconfig.json Add build folder to exclusion list in jsconfig.json Jun 15, 2016
package.json
run.js This commit fixes issue #32 (#35) May 20, 2017
starter-kit.sln Upgrad .NET Core to 1.1.1 with .csproj; upgrade packages etc (#31) Apr 3, 2017
webpack.config.js Update npm dependencies (#43) Jul 8, 2017
yarn.lock Update .NET Core to v1.1.0 Dec 8, 2016

README.md

ASP.NET Core Starter Kit  

ASP.NET Core Starter Kit is a real-world boilerplate and tooling for creating single-page web applications (SPA) oriented towards progressive enhancement design, cross-platform compatability and component-based UI architecture. It is built upon best of breed technologies including .NET Core, Kestrel, EF Core, Babel, Webpack, React, Redux, CSS Modules, React Hot Loader and more. This boilerplate comes in both C# and F# flavors.

See demo, docs  |  Follow us on Gitter or Twitter  |  Learn React.js, ES6 and ASP.NET Core  |  Visit our sponsors:

Hiring

Features

    ✓ Component-based front-end development via Webpack, CSS Modules and React (see webpack.config.js)
    ✓ Modern JavaScript syntax (ES2015+) via Babel; modern CSS syntax (CSS3+) via PostCSS
    ✓ Application state management via Redux (see client/store.js)
    ✓ Universal cross-stack routing and navigation via path-to-regexp and history (see client/routes.json)
    ✓ Code-splitting and async chunk loading with Webpack and ES6 System.import()
    ✓ Hot Module Replacement (HMR) /w React Hot Loader
    ✓ Lightweight build automation with plain JavaScript (see run.js)
    ✓ Cross-device testing with Browsersync
    ✓ Git-based deployment to Azure App Service (see run.js/publish)
    ✓ 24/7 community support on Gitter or StackOverflow; consulting and customization requests on Codementor

Directory Layout

.
├── /.vscode/                   # Visual Studio Code settings
├── /build/                     # The folder for compiled output
├── /client/                    # Client-side app (frontend)
│   ├── /components/            # Common or shared UI components
│   ├── /utils/                 # Helper functions and utility classes
│   ├── /views/                 # UI components for web pages (screens)
│   ├── history.js              # HTML5 History API wrapper used for navigation
│   ├── main.js                 # Entry point that bootstraps the app
│   ├── router.js               # Lightweight application router
│   ├── routes.json             # The list of application routes
│   └── store.js                # Application state manager (Redux)
├── /client.test/               # Unit and integration tests for the frontend app
├── /docs/                      # Documentation to the project
├── /public/                    # Static files such as favicon.ico etc.
│   ├── robots.txt              # Instructions for search engine crawlers
│   └── ...                     # etc.
├── /server/                    # Web server and data API (backend)
│   ├── /Controllers/           # ASP.NET Web API and MVC controllers
│   ├── /Models/                # Entity Framework models (entities)
│   ├── /Views/                 # Server-side rendered views
│   ├── appsettings.json        # Server-side application settings
│   ├── Startup.cs              # Server-side application entry point
│   └── web.config              # Web server settings for IIS
├── /server.test/               # Unit and integration tests for the backend app
│── jsconfig.json               # Visual Studio Code settings for JavaScript
│── package.json                # The list of project dependencies and NPM scripts
│── run.js                      # Build automation script (similar to gulpfile.js)
└── webpack.config.js           # Bundling and optimization settings for Webpack

Prerequisites

Getting Started

Step 1. Clone the latest version of ASP.NET Core Starter Kit on your local machine by running:

$ git clone -o aspnet-starter-kit -b master --single-branch \
      https://github.com/kriasoft/aspnet-starter-kit.git MyApp
$ cd MyApp

Alternatively, scaffold your project with Yeoman:

$ npm install -g yo
$ npm install -g generator-aspnetcore
$ yo aspnetcore

Step 2. Install project dependencies listed in project.json and package.json files:

$ npm install                   # Install both Node.js and .NET Core dependencies

Step 3. Finally, launch your web app:

$ node run                      # Compile and lanch the app, same as running: npm start

The app should become available at http://localhost:5000/. See run.js for other available commands such as node run build, node run publish etc. You can also run your app in a release (production) mode by running node run --release, or without Hot Module Replacement (HMR) by running node run --no-hmr.

How to Deploy

Before you can deploy your app to Azure App Service, you need to open Web App settings in Azure Portal, go to "Deployment Source", select "Local Git Repository" and hit [OK]. Then copy and paste "Git clone URL" of your Web App into run.js/publish file. Finally, whenever you need to compile your app into a distributable format and upload that to Windows Azure App Service, simply run:

$ node run publish              # Same as running: npm run publish

How to Update

We work hard on keeping the project up-to-date and adding new features. Down the road, after starting a new web application project based on this boilerplate, you can always fetch and merge the latest changes from this (upstream) repo back into your project by running:

$ git checkout master
$ git fetch aspnet-starter-kit
$ git merge aspnet-starter-kit/master 

Alternatively, pull the latest version of this repository into a separate folder and compare it with your project by using a diff tool such as Beyond Compare.

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn React.js, ES6 and ASP.NET Core

🎓   React.js Training Program by Tyler McGinnis
🎓   React for Beginners and ES6 Training Course by Wes Bos
📗   React: Up & Running: Building Web Applications by Stoyan Stefanov (Aug, 2016)
📗   Getting Started with React by Doel Sengupta and Manu Singhal (Apr, 2016)
📗   You Don't Know JS: ES6 & Beyond by Kyle Simpson (Dec, 2015)
📗   C# 6 and .NET Core 1.0: Modern Cross-Platform Development by Mark J. Price (Mar, 2016)
📗   Professional C# 6 and .NET Core 1.0 by Christian Nagel (Apr, 2016)

Related Projects

Get in Touch

License

Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Made with ♥ by Konstantin Tarkus (@koistya) and contributors

You can’t perform that action at this time.