[FIXED] How to deploy/publish an ASP.NET Core React JS website with a particular .env file?

Issue

I have a simple ASP.NET Core React JS web app. I've been publishing it directly to Azure just fine.

Recently I introduced a 2nd environment (prod vs dev).

How can I publish it to Prod using .env, and publish to Dev using .env.dev ?

Notes:

• I build using VS Enterprise.
• I deploy using VS Enterprise (right-click -> Publish).
• I know I can update the 'scripts' section in packages.json. But I dont believe this script(s) are called when I do a Publish from VS IDE.

Perhaps there is a way to specify the script??

Ex: build:dev would build using .env.development, and build:prod would build using .env

Thanks

Update

I found this in the .csproj file:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Solution

You can use the following steps:

Create two environment files: .env for production and .env.dev for development.

In your package.json file, update the scripts section to include two new commands: build:dev and build:prod. These commands will be used to build your app using the appropriate environment file.

Here is an example of what your scripts section might look like:

"scripts": {
  "build:dev": "env-cmd -f .env.dev react-scripts build",
  "build:prod": "env-cmd -f .env react-scripts build",
  "start:dev": "env-cmd -f .env.dev react-scripts start",
  "start:prod": "env-cmd -f .env react-scripts start",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

In your .csproj file, update the TargetFramework element to include the Publish target:

<TargetFramework>netcoreapp3.1</TargetFramework>
<TargetFramework>net5.0</TargetFramework>

In your project, create a new file named publish.prod.cmd that contains the following commands:

npm run build:prod
dotnet publish

This file will be used to build your app using the production environment file and publish it to Azure.

In your project, create a new file named publish.dev.cmd that contains the following commands:

npm run build:dev
dotnet publish

This file will be used to build your app using the development environment file and publish it to Azure.

In Visual Studio, open the Publish window for your project. In the Build section, select the Custom option and enter the path to the appropriate publish script file (publish.prod.cmd for production and publish.dev.cmd for development).

Select the appropriate publish profile and click the Publish button to publish your app to Azure. The app will be built using the environment file specified in the selected publish script, and the resulting build will be published to Azure.

Update:

PublishRunWebpack target is responsible for building your React app using the npm install and npm run build commands when you publish your ASP.NET Core app from Visual Studio.

To specify the .env file that you want to use for your different environments, you can update the npm run build command in this target to include the --env flag, followed by the name of the environment that you want to use. For example, you could update the command to npm run build --env.dev to use the .env.dev file for the "dev" environment, and npm run build --env.prod to use the .env file for the "prod" environment.

You can update this target in your .csproj file like this:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --env.dev" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Then, when you publish your ASP.NET Core app from Visual Studio, the React app will be built using the .env.dev file for the "dev" environment. You can specify a different environment by updating the npm run build command in the PublishRunWebpack target accordingly.

Answered By - Maverick
Answer Checked By - - Marie Seifert (ReactFix Admin)