Serve react app gist

file-loader.xml

<ee:transform doc:name="pathToRead">
<ee:message></ee:message>
	<ee:variables>
		<ee:set-variable variableName="readFilePath" ><![CDATA[%dw 2.0
output text/plain 

var webURLPatterns = '((\/ui\/?)+\$)|(\/ui\/messages)' 

fun isWebRequest(requestedPath) = 
	sizeOf(requestedPath match(webURLPatterns)) > 0   
	
fun removeUIPrefix(requestedPath) = 
	(requestedPath replace /^(\/ui\/)/ with "") 
--- 
using( webRequest = isWebRequest(attributes.requestPath) ) 
(if(webRequest) 
	'/web/index.html' 
else  
	"/web/" ++ removeUIPrefix(attributes.requestPath) )]]></ee:set-variable> 
			</ee:variables>
		</ee:transform>
		<ee:transform doc:name="read file">
			<ee:message>
				<ee:set-payload><![CDATA[%dw 2.0
import java!org::mule::runtime::core::api::util::IOUtils 

output text/plain 
--- 
IOUtils::getResourceAsStream(vars.readFilePath, null)]]></ee:set-payload> 
			</ee:message>
		</ee:transform>

front-end-plugin.xml

<groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.9.1</version>

  <configuration>
    <workingDirectory>${basedir}/ui/mule-welcomer</workingDirectory>
  </configuration>

  <executions>
    <!-- install node.js libraries in your build process without 
    installing Node/NPM globally for your build system -->
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v12.14.1</nodeVersion>
        <npmVersion>6.13.4</npmVersion>
      </configuration>
    </execution>
    <execution>
      <id>build</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>run-script build</arguments>
      </configuration>
      <phase>generate-resources</phase>
    </execution>
  </executions>
</plugin>

listeners.xml

<http:listener-config name="mule-welcomer-httpListenerConfig">
		<http:listener-connection host="0.0.0.0" port="8081" />
		<http:listener-interceptors>
			<http:cors-interceptor allowCredentials="false">
				<http:origins>
					<http:public-resource />
				</http:origins>
			</http:cors-interceptor>
		</http:listener-interceptors>
	</http:listener-config>
	<http:listener doc:name="Listener" config-ref="mule-welcomer-httpListenerConfig" path="/ui/*">
<http:listener config-ref="mule-welcomer-httpListenerConfig" path="/api/*">

maven-profiles.xml

<profiles>
  <profile>
    <id>default</id>
    <activation>
      <activeByDefault>true</activeByDefault>
    </activation>
    <build>
      <plugins>
        <plugin>
          <groupId>com.github.eirslett</groupId>
          <artifactId>frontend-maven-plugin</artifactId>
          <version>1.9.1</version>
          <configuration>
            <workingDirectory>${basedir}/ui/mule-welcomer</workingDirectory>
          </configuration>
          <executions>
            <execution>
              <id>build</id>
              <goals>
                <goal>npm</goal>
              </goals>
              <configuration>
                <arguments>run-script build</arguments>
              </configuration>
              <phase>generate-resources</phase>
            </execution>
          </executions>
        </plugin>
      </plugins>
    </build>
  </profile>
  <profile>
    <id>install-npm</id>
    <activation>
      <property>
        <name>installNPM</name>
      </property>
    </activation>
    <build>
      <plugins>
        <plugin>
          <groupId>com.github.eirslett</groupId>
          <artifactId>frontend-maven-plugin</artifactId>
          <version>1.9.1</version>

          <configuration>
            <workingDirectory>${basedir}/ui/mule-welcomer</workingDirectory>
          </configuration>
          <executions>
            <execution>
              <id>install node and npm</id>
              <goals>
                <goal>install-node-and-npm</goal>
              </goals>
              <configuration>
                <!-- See https://nodejs.org/en/download/ for latest node and npm 
                  (lts) versions -->
                <nodeVersion>v12.14.1</nodeVersion>
                <npmVersion>6.13.4</npmVersion>
              </configuration>
            </execution>
            <execution>
              <id>npm install</id>
              <goals>
                <goal>npm</goal>
              </goals>
              <configuration>
                <arguments>install</arguments>
              </configuration>
            </execution>
            <execution>
              <id>build</id>
              <goals>
                <goal>npm</goal>
              </goals>
              <configuration>
                <arguments>run-script build</arguments>
              </configuration>
              <phase>generate-resources</phase>
            </execution>
          </executions>
        </plugin>
      </plugins>
    </build>
  </profile>
</profiles>

maven-resources.xml

<build>
  ....
  <resources>
    <resource>
      <directory>ui/mule-welcomer/build</directory>
    </resource>
    <resource>
      <directory>src/main/resources</directory>
    </resource>
  </resources>
</build>

static-resource.xml

<http:load-static-resource doc:name="Load static resource" resourceBasePath="#[p('app.home') ++ '/web']"/>