Upload React Application to Nexus

Question

I built a React-Application using create-react-app.

The production build is done on Jenkins via:

npm install --prod npm run build

Then I have the "ready to deploy" artifact.

But how can I get this artifact on my Nexus-Server?
Can i use the version from package.json?
Do I have to make a zip or something like that on my own before uploading?

This would be pretty nice to have a history and it would be easier/faster to build dockers from the artifact on nexus than building again.

How you guys solved that? Thanks for answers.

Answer 1

I know this question is old, but it might help others.

I recently had to do something similar. My approach was:

1. Convert the project to a Maven one
2. Configure my private repository in pom.xml

    <distributionManagement>
        <snapshotRepository>
            <id>RepoId</id>
            <url>http://.../repositories/snapshots/</url>
        </snapshotRepository>
        <repository>
            <id>RepoId</id>
            <url>http://.../repositories/releases/</url>
        </repository>
    </distributionManagement>

3. Configure maven clean plugin to empty the build directory

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-clean-plugin</artifactId>
                <configuration>
                    <filesets>
                        <fileset>
                            <directory>build</directory>
                            <includes>
                                <include>**/*</include>
                            </includes>
                            <followSymlinks>false</followSymlinks>
                        </fileset>
                    </filesets>
                </configuration>
            </plugin>

4. Configure maven jar plugin to skip the jar creation

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <executions>
                    <execution>
                        <id>default-jar</id>
                        <phase>none</phase>
                    </execution>
                </executions>
            </plugin>

5. Integrate frontend-maven-plugin - my project needed yarn, but it can also run with npm

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.12.1</version>
                <executions>
                    <!-- install node & yarn -->
                    <execution>
                        <id>install node and yarn</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v16.13.0</nodeVersion>
                            <yarnVersion>v1.22.17</yarnVersion>
                        </configuration>
                    </execution>

                    <!-- yarn install -->
                    <execution>
                        <id>yarn install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                    </execution>

                    <!-- yarn run build -->
                    <execution>
                        <id>yarn run build</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

6. Integrate maven assembly plugin in order to pack everything under build directory into a zip file

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-assembly-plugin</artifactId>
                <executions>
                    <!-- pack everything under /build into a zip -->
                    <execution>
                        <id>create-distribution</id>
                        <phase>package</phase>
                        <goals>
                            <goal>single</goal>
                        </goals>
                        <configuration>
                            <descriptors>
                                <descriptor>assembly.xml</descriptor>
                            </descriptors>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

where assembly.xml looks like:

<?xml version="1.0" encoding="UTF-8"?>
<assembly xmlns="http://maven.apache.org/ASSEMBLY/2.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/ASSEMBLY/2.1.0 http://maven.apache.org/xsd/assembly-2.1.0.xsd">
    <includeBaseDirectory>false</includeBaseDirectory>
    <formats>
        <format>zip</format>
    </formats>
    <fileSets>
        <fileSet>
            <outputDirectory>/</outputDirectory>
            <directory>build</directory>
        </fileSet>
    </fileSets>
</assembly>

7. Finally run mvn clean deploy in order to get the zip file uploaded to nexus.

Also, I found this solutions for synchronizing the package.json version with the pom.xml version, but I did not use it.