AspNet Core middelware for Parcel allowing you to start Parcel when running your AspNet Core application. It is based on- and works the same way as WebPack middelware.
This package will ensure that Parcel runs when you start your AspNetCore application, and that it runs parcel build index.html when you build it with release configuration. It will also ensure that the generated files are added to your application as part of the publish phase.
The defaults in this package assumes that you have an index.html in the root of your application (same level as .csproj), and that you want the generated output to be placed in wwwroot. The debug files will be placed in wwwroot/debug and served by parcel through the middelware. When building for release it will put the files in wwwroot.
Warning: This middelware is not magic, and currently it does not handle issues where Parcel itself freezes. Please try running Parcel from command line if something seems broken as it is easy to miss errors logged to the console alongside other output from Kestrel. I welcome input or pull requests for making this more robust.
- Node.js
- To test if this is installed and can be found, run
node -von a command line - Note: If you're deploying to an Azure web site, you don't need to do anything here - Node is already installed and available in the server environments
- To test if this is installed and can be found, run
- .NET Core 2.1 or later
mkdir AspNetCoreWithParcel
cd AspNetCoreWithParcel
dotnet new web
npm init -y
npm install parcel-bundler --save-dev
dotnet add package RudiBech.Parcel.AspNetCoreThen change your Startup.cs similar to this:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseMvc();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
//Remember to add using RudiBech.AspNetCore.SpaServices.Parcel;
app.UseParcelDevMiddleware();
}
else
{
app.UseStaticFiles();
}
}Then add an index.html as your Parcel entry point. You can use a different entry point by using the available override on UseParcelDevMiddleware. You will then also need to add a couple of properties to your csproj file:
<PropertyGroup>
<!-- These values must match whatever you pass in to UseParcelDevMiddleware -->
<!-- Default to index.html -->
<ParcelAspNetCoreEntryPoint>somePath/index.js</ParcelAspNetCoreEntryPoint>
<!-- Default to wwwroot -->
<ParcelAspNetCoreOutDir>dist</ParcelAspNetCoreOutDir>
</PropertyGroup>Please note: This only gives you a starting point. You still need to set up your project with other dependencies. E.g. to get up and running with Vue and HMR you should add the following dependencies:
npm install vue --save-dev
npm install vue-template-compiler --save-dev
npm install @vue/component-compiler-utils --save-dev
npm install babel-preset-env --save-devBasic index.html (to get you started):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue js Setup With Parcel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<h2>Simple Vue.js Parcel Starter Kit</h2>
<div id="app"></div>
</div>
<script src="./src/app.js"></script>
</body>
</html>Sample src/app.js:
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});Sample src/App.vue:
<template>
<div>
<h3>{{ data }}</h3>
</div>
</template>
<script>
export default {
data () {
return {
data: 'Welcome to parcel bundler'
}
}
}
</script>If you combine this with Material Design Components and e.g. vue-mdc-adapter and try to use .scss imports like @import '~vue-mdc-adapter/dist/styles' then you will most likely run into issues with nested packages. A workaround for this is to add a file .sassrc.js with the following content:
const path = require('path')
const CWD = process.cwd()
module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules/'),
]
}This causes performance issues, so please consider other alternatives if possible.