Merge pull request #1274 from FoalTS/react-cli

Fix `foal connect react` and support build output dir

docs/blog/version-4.5-release-notes.md

@@ -14,6 +14,14 @@ Version 4.5 of [Foal](https://foalts.org/) is out!
 
 <!--truncate-->
 
+## CLI fixes
+
+When running `npx foal connect react` to connect the React application to the Foal application in development, the following features did not work:
+- Proxify requests from the client to the server without needing to enable CORS or specify a different port in development.
+- Build the client application in the server application's public directory.
+
+This is fixed in v4.5.
+
 ## Global use of CLI deprecated
 
 In previous versions, the tutorial suggested installing the CLI globally to create a new application or generate files. However, it is considered bad practice to install a dependency globally for local use.

docs/docs/frontend/angular-react-vue.md

@@ -70,6 +70,4 @@ One way to get around this, keeping the policy and the same codebase, is to conf
 
 ### Build Outpath
 
-> *This feature only works with Angular and Vue.*
-
 The `connect` command also modifies the build output path of your front so that its bundles are saved in the `public/` directory. This way, you can run the frontend and the backend build commands and directly ship the application to production.

docs/docs/tutorials/real-world-example-with-react/14-production-build.md

@@ -14,11 +14,7 @@ In your frontend directory, run the following command:
 npm run build
 ```
 
-This command builds the React application for production and saves the files in the `build` directory.
-
-Open it and copy all its contents to the `public` directory of your Foal application.
-
-> When you use `npx foal connect` with Angular or Vue, the frontend build will automatically save the files in `public`.
+This command builds the React application for production and saves the files in the `public` directory of your Foal application.
 
 Now, if you navigate to [http://localhost:3001](http://localhost:3001), you will see the frontend application served by the backend server.
 

packages/cli/src/generate/generators/react/connect-react.spec.ts

@@ -9,17 +9,29 @@ describe('connectReact', () => {
 
   afterEach(() => fs.tearDown());
 
-  it('should update package.json to set up the proxy, install ncp and change the output dir.', () => {
+  it('should update package.json and create a .env.development file to set up the proxy.', () => {
     fs
       .ensureDir('connector-test/react')
       .copyFixture('react/package.json', 'connector-test/react/package.json');
 
     connectReact('./connector-test/react');
 
     fs
-      .assertEqual('connector-test/react/package.json', 'react/package.json');
+      .assertEqual('connector-test/react/package.json', 'react/package.json')
+      .assertEqual('connector-test/react/.env.development', 'react/env.development');
   });
 
+  it('should create a .env file with the path to the output dir.', () => {
+    fs
+      .ensureDir('connector-test/react')
+      .copyFixture('react/package.json', 'connector-test/react/package.json');
+
+    connectReact('./connector-test/react');
+
+    fs
+      .assertEqual('connector-test/react/.env', 'react/env');
+  })
+
   it('should not throw if the path does not exist.', () => {
     connectReact('somewhere-that-does-not-exist');
   });

packages/cli/src/generate/generators/react/connect-react.ts

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join, relative } from 'path';
 
 import { red } from 'colors/safe';
 import { FileSystem } from '../../file-system';
@@ -20,11 +20,17 @@ export function connectReact(path: string) {
     return;
   }
 
+  const outputPath = join(relative(path, process.cwd()), 'public')
+    // Make projects generated on Windows build on Unix.
+    .replace(/\\/g, '/');
+
   fs
     .cd(path)
     .modify('package.json', content => {
       const pkg = JSON.parse(content);
       pkg.proxy = 'http://localhost:3001';
       return JSON.stringify(pkg, null, 2);
-    });
+    })
+    .copy('react/env.development', '.env.development')
+    .render('react/env', '.env', { path: outputPath });
 }

packages/cli/src/generate/generators/vue/connect-vue.spec.ts

@@ -9,7 +9,7 @@ describe('connectVue', () => {
 
   afterEach(() => fs.tearDown());
 
-  it('should update package.json to set up the proxy, install ncp and change the output dir.', () => {
+  it('should update package.json to set up the proxy and change the output dir.', () => {
    fs
     .ensureDir('connector-test/vue')
     .copyFixture('vue/package.json', 'connector-test/vue/package.json');

packages/cli/src/generate/specs/react/env

@@ -0,0 +1 @@
+BUILD_PATH='../../public'

packages/cli/src/generate/specs/react/env.development

@@ -0,0 +1,3 @@
+# Proxify requests to the development server.
+# See https://github.com/facebook/create-react-app/issues/12304
+DANGEROUSLY_DISABLE_HOST_CHECK=true

packages/cli/src/generate/templates/react/env

@@ -0,0 +1 @@
+BUILD_PATH='/* path */'

packages/cli/src/generate/templates/react/env.development

@@ -0,0 +1,3 @@
+# Proxify requests to the development server.
+# See https://github.com/facebook/create-react-app/issues/12304
+DANGEROUSLY_DISABLE_HOST_CHECK=true