How to make Visual Studio 2017 call the `yarn start`

user_4871582 0
Viewed 4558

I have a React project, and I run it with yarn start that runs react-scripts start.

I want to use Visual Studio 2017 to edit code and run the app, but I don't want to run using the VS2017 node.js things, I want to hit F5 and continue using the react-scripts.

Is there some way to do that?

## Update ##

For those who want a better .njsproj file format, there is this idea in the developer community that deserve an upvote: https://developercommunity.visualstudio.com/content/idea/351736/use-new-project-format-for-njsproj-files.html

react-scripts visual-studio-2017 yarnpkg visual-studio
3 Answers

Another workaround might be changing your script section on package.json to

"scripts": {
    "start": "yarn react-scripts start"
     ...
}

which will be reached by a configuration on Startup.cs.

if (env.IsDevelopment())
{
    spa.UseReactDevelopmentServer(npmScript: "start");
}
user_40361580

You could add it as a pre-build step in the project settings, but I think a better way is with custom targets in your .csproj file. I'm using vue instead of react. This is what I use in my .csproj, and you could do something similar.

  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
  <Target Name="RunNpmBuild" Condition="'$(Configuration)' != 'ServerOnly'">
    <Exec Command="yarn" WorkingDirectory="./www" />
    <Exec Command="npm run build" WorkingDirectory="./www" />
  </Target>
  <Target Name="BeforeBuild" DependsOnTargets="RunNpmBuild">
  </Target>

Note that I also have an additional build configuration called "ServerOnly" based on the debug configuration so that I can f5 debug just the server without having to run yarn or my npm build.

user_66114110

It's the same thing for react and all other Single Page Application projects. I've an SPA written in react and I used this in csproj file

        <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." />
        <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 -->
    <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)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
user_62854170
Related