Lightweight starter kit for ASP.NET Core, React, Typescript and Webpack with HMR
If you are looking for a starter kit based on NPM scripts, supporting ASP.NET Core 2.1, React, Typescript, Webpack with Hot Module Replacement and other features, this article is for you.
The most obvious choice today for bootstraping a new React application is to use Facebook’s create-react-app (CRA) template (or create-react-app-typescript with Typescript support). However if you want to leverage ASP.NET Core you can use Microsoft template based on create-react-app.
For me create-react-app is really great until you need some more control over your dependencies and configuration, and you call npm run eject which is one way operation. Then you are on your own because there is no way back. In the end, for me, create-react-app has too many features that I don’t need.
Microsoft React template allows you to use React with ASP.NET Core but because it’s based on the original Facebook’s create-react-app you have to reconsider it twice before trying to go on your own and running the commandnpm run eject. Moreover, I don’t like the way how the template is calling into Node.js to run different npm scripts like npm install or npm run build. They are defined in the ASP.NET Core project properties contained in the *.csproj file. This is handy when you run dotnet CLI commands to compile, run and debug ASP.NET Core application but becomes really painfull when you have to define and run different npm scripts.
My requirements are really simple for a React starter kit. I want to:
- control my dependencies, the configuration and it should be really simple.
- run it on ASP.NET Core 2.1 web server but everything should be controlled through npm scripts and not
dotnetCLI. - leverage Typescript, Webpack, HMR…and many more
That’s why I created a new template that fits my needs. ASP.NET Core Starter Kit 2
ASP.NET Core Starter Kit 2
ASP.NET Core Starter Kit 2 is a mix of the original ASP.NET Core Starter Kit (which seems to be not active anymore, thus “2” in the name) and Microsoft ASP.NET Core React/Redux template. The detailed description can be found on the project repository https://github.com/Luteceo/aspnet-starter-kit-2.0.
Main features are
- Web component development with React 16.4
- Application state managment with Redux 4.0
- Bundling with Webpack 4.16
- Static type checking with Typescript 2.9.2
- Hot Module Replacement (HMR) with React Hot Loader
- Lightweight build automation with plain JavaScript
- Integration with ASP.NET Core 2.1
Lightweight build automation
I think it is interesting to say some words about build automation. All the code is contained in run.js file adapted from the original ASP.NET Core Starter Kit. Here is an example of the start task which bundles client application using Webpack and starts ASP.NET Core web server:
tasks.set('start', () => {
global.HMR = !process.argv.includes('--no-hmr');
return Promise.resolve()
.then(() => run('clean'))
.then(() => run('appsettings'))
.then(() => run('build'))
.then(() => run('bundleVendor'))
.then(() => new Promise(resolve => {
let count = 0;
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
// Node.js middleware that compiles application in watch mode with HMR support
// http://webpack.github.io/docs/webpack-dev-middleware.html
const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig[0].output.publicPath,
stats: webpackConfig[0].stats
});
compiler.hooks.done.tap('done', () => {
// Launch ASP.NET Core server after the initial bundling is complete
if (++count === 1) {
const options = {
cwd: path.resolve(__dirname, './server/'),
stdio: ['ignore', 'pipe', 'inherit'],
env: Object.assign({}, process.env, {
ASPNETCORE_ENVIRONMENT: 'Development',
NODE_PATH: '../node_modules/'
}),
};
cp.spawn('dotnet', ['watch', 'run'], options).stdout.on('data', data => {
process.stdout.write(data);
});
}
});
}));
});This allows to bundle and compile the application in watch mode with HMR support and then launch ASP.NET Core server with the following line :
cp.spawn('dotnet', ['watch', 'run'], options).stdout.on('data', data => {
process.stdout.write(data);
});In run.js file other tasks are defined to run test, build and publish the application. Of course it’s easy to add more tasks that fit you particular environment requirements.
Running the application
Once you’ve cloned the template from https://github.com/Luteceo/aspnet-starter-kit-2.0 you run the application with yarn install and yarn start. The app should become available at http://localhost:5000/ (more details here). HMR is by default enabled:
Conclusion
The adaptation of two existing React starter kits, allowed me to get the best of two worlds and build a template that really fits my needs. Without to much configuration and ceremony I achieved what I really wanted; ASP.NET Core 2.1 integration with React/Redux, Typescript and HMR. I hope you’ll find this useful, please live any comments or suggestions below. I will also appreciate any PR’s and issues. You’ll find the code here: https://github.com/Luteceo/aspnet-starter-kit-2.0#getting-started. Take a tour, see the code and enjoy!
