Search code examples
reactjsspring-bootmavenheroku

deploying spring app with react frontend to heroku

I have a react app with Spring backend. I have successfully deployed the Spring web app to Heroku, I can send http requests via postman to the endpoints and they work fine.

But I am unsure how I should allow the app on heroku to utilise the react frontend.

So far my structure is as below,

syftgolf
-.idea
-.mvn
-src
-target
-uploads-dev
-uploads-prod
-uploads-test
-.gitignore
-HELP.md
-mvnw
-mvnw.cmd
-pom.xml
-syftgolf.iml
-system.properties

Then in src I have

src
-main
--frontend //Front end react code
--java //Java code for Spring web app
--resources
-test

I am using the heroku CLI command git push heroku master on my route directory to deploy the app to heroku, this appears to then auto detact its a java app and then builds the app from there.

I am stuck though on how is the correct way to also build the react app? I read a post about building it first and adding it into the target/classes/static folder on my Spring app, but this folder doesn't appear to exist.

Which is the correct way to go about doing this please so when deployed, my app on heroku will also show the frontend stuff.

Solution

  • You need to tell maven where the react app resources are and where to add them in the output artifact. Use the maven resource plugin as follows:

    <plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-resources</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.directory}/classes/resources</outputDirectory>
                <resources>
                    <resource>
                        <directory>/path/to/react/resources</directory>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

    Just change the resource directory path to your react app build directory. The plugin will copy all the files in the directory to your artifact resources folder so spring will find them.