Refactor the frontend's infrastructure (loic-sharma#122)

Rebuilds the frontend on the publish step. This is based off @solidsloth's work in loic-sharma#101.

.gitignore

@@ -266,4 +266,13 @@ __pycache__/
 *.pyc
 
 # Cake - Uncomment if you are using it
-# tools/
+# tools/
+
+# Ignore client app cache
+**/Baget.UI/.cache
+
+# Ignore client dist files
+**/Baget.UI/dist/
+
+# Ignore database file
+**/baget.db 

.vscode/launch.json

@@ -10,9 +10,9 @@
             "request": "launch",
             "preLaunchTask": "build",
             // If you have changed target frameworks, make sure to update the program path.
-            "program": "${workspaceFolder}/src/BaGet/bin/Debug/netcoreapp2.0/BaGet.dll",
+            "program": "${workspaceFolder}/src/BaGet/bin/Debug/netcoreapp2.1/BaGet.dll",
             "args": [],
-            "cwd": "${workspaceFolder}",
+            "cwd": "${workspaceFolder}/src/BaGet",
             "stopAtEntry": false,
             "internalConsoleOptions": "openOnSessionStart",
             "launchBrowser": {

readme.md

@@ -24,4 +24,17 @@ For more information, please refer to [our documentation](https://loic-sharma.gi
 * Coming soon: Supports [private feeds](https://loic-sharma.github.io/BaGet/private-feeds/)
 * And more!
 
-Stay tuned, more features are planned!
+Stay tuned, more features are planned!
+
+## Develop
+
+1. Install [.NET Core SDK](https://www.microsoft.com/net/download), [Node.js](https://nodejs.org/), and [Yarn](https://yarnpkg.com/en/docs/install)
+2. Run `git clone https://github.com/loic-sharma/BaGet.git`
+3. Launch the backend:
+    1. Navigate to `.\BaGet\src\BaGet`
+    2. Start the backend with `dotnet run`
+4. Launch the frontend:
+    1. Navigate to `.\BaGet\src\BaGet.UI`
+    2. Run `yarn install`
+    3. Start the frontend with `yarn develop`
+5. Open the URL `http://localhost:5000/v3/index.json` in your browser

src/BaGet.UI/package.json

@@ -11,7 +11,7 @@
     "repository": "github:loic-sharma/BaGet",
     "scripts": {
         "develop": "parcel ./index.html",
-        "build": "parcel build ./index.html --out-dir ../BaGet/wwwroot"
+        "build": "parcel build ./index.html"
     },
     "dependencies": {
         "bootstrap": "3.3.7",

src/BaGet/BaGet.csproj

@@ -2,11 +2,15 @@
 
   <PropertyGroup>
     <TargetFramework>netcoreapp2.1</TargetFramework>
+
+    <SpaRoot>..\Baget.UI\</SpaRoot>
+    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="McMaster.Extensions.CommandLineUtils" Version="2.2.5" />
     <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.1" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.1.1" />
     <PackageReference Include="Microsoft.Data.SQLite" Version="2.1.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.1.1" />
     <PackageReference Include="Microsoft.Extensions.Logging.Configuration" Version="2.1.1" />
@@ -19,4 +23,39 @@
     <ProjectReference Include="..\BaGet.Core\BaGet.Core.csproj" />
   </ItemGroup>
 
+  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
+    <!-- Ensure Node.js is installed -->
+    <Exec Command="node --version" ContinueOnError="true">
+      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
+    </Exec>
+    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
+    <!-- Ensure Yarn is installed -->
+    <Exec Command="yarn --version" ContinueOnError="true">
+      <Output TaskParameter="ExitCode" PropertyName="YarnErrorCode" />
+    </Exec>
+    <Error Condition="'$(YarnErrorCode)' != '0'" Text="Yarn is required to build and run this project. To continue, please install Yarn from https://yarnpkg.com/, and then restart your command prompt or IDE." />
+    <Message Importance="high" Text="Restoring dependencies using 'yarn'. This may take several minutes..." />
+    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
+  </Target>
+
+  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
+
+    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
+    <RemoveDir Directories="$(SpaRoot)dist" />
+
+    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
+    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn build" />
+
+    <!-- Include the newly-built files in the publish output -->
+    <ItemGroup>
+      <DistFiles Include="$(SpaRoot)dist\**" />
+      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
+        <!-- Because the root is relative and has ..\, the "Workaround" folder just tricks msbuild to put 
+          the files where we want them. Otherwise they would be placed up a directory under the BaGet folder. -->
+        <RelativePath>Workaround\%(DistFiles.Identity)</RelativePath> 
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </ResolvedFileToPublish>
+    </ItemGroup>
+  </Target>
+
 </Project>

src/BaGet/Startup.cs

@@ -23,6 +23,12 @@ public Startup(IConfiguration configuration)
         public void ConfigureServices(IServiceCollection services)
         {
             services.ConfigureBaGet(Configuration, httpServices: true);
+
+            // In production, the UI files will be served from this directory
+            services.AddSpaStaticFiles(configuration =>
+            {
+                configuration.RootPath = "Baget.UI/dist";
+            });
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -48,8 +54,7 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 
             app.UsePathBase(Configuration.Get<BaGetOptions>().PathBase);
             app.UseForwardedHeaders();
-            app.UseDefaultFiles();
-            app.UseStaticFiles();
+            app.UseSpaStaticFiles();
 
             app.UseCors(ConfigureCorsOptions.CorsPolicy);
 
@@ -62,6 +67,16 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
                     .MapRegistrationRoutes()
                     .MapPackageContentRoutes();
             });
+
+            app.UseSpa(spa =>
+            {
+                if (env.IsDevelopment())
+                {
+                    // TODO: This could launch the react frontend, like "UseReactDevelopmentServer".
+                    // See: https://github.com/aspnet/JavaScriptServices/blob/7a0413434577274666ff72ee790b53cc71b22970/src/Microsoft.AspNetCore.SpaServices.Extensions/ReactDevelopmentServer/ReactDevelopmentServerMiddleware.cs#L63
+                    spa.UseProxyToSpaDevelopmentServer("http://localhost:1234");
+                }
+            });
         }
     }
 }