Search code examples
node.jsreactjsmavennpmyarnpkg

How do I switch from npm to yarn in my project?


I'm having an issue trying to switch to yarn from npm inside my project. I tried downloading yarn and I'm still getting npm to start my project. I need to switch because a project I'm working on needs it to be yarn so I can add a maven frontend plugin to tie my backend and frontend to gather for deployment.

enter image description here

1.
<frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
<node.version>v10.13.0</node.version>
<yarn.version>v1.12.1</yarn.version>

2.
<profiles>
    <profile>
        <id>demo</id>
        <build>
            <plugins>

                <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>${frontend-maven-plugin.version}</version>
                    <configuration>
                        <workingDirectory>src/js</workingDirectory>
                    </configuration>
                    <executions>
                        <execution>
                            <id>install node</id>
                            <goals>
                                <goal>install-node-and-yarn</goal>
                            </goals>
                            <configuration>
                                <nodeVersion>${node.version}</nodeVersion>
                                <yarnVersion>${yarn.version}</yarnVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>yarn install</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                        <execution>
                            <id>yarn test</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>test</phase>
                            <configuration>
                                <arguments>test</arguments>
                                <environmentVariables>
                                    <CI>true</CI>
                                </environmentVariables>
                            </configuration>
                        </execution>
                        <execution>
                            <id>yarn build</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>compile</phase>
                            <configuration>
                                <arguments>build</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <executions>
                        <execution>
                            <id>copy-resources</id>
                            <phase>process-classes</phase>
                            <goals>
                                <goal>copy-resources</goal>
                            </goals>
                            <configuration>
                                <outputDirectory>${basedir}/target/classes/static</outputDirectory>
                                <resources>
                                    <resource>
                                        <directory>src/js/build</directory>
                                    </resource>
                                </resources>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>
</profiles>

Link1 https://github.com/amigoscode/spring-boot-react-fullstack/blob/app-0/course-files/profiles.txt Link2 https://github.com/eirslett/frontend-maven-plugin


Solution

  • Full simple step-by-step answer:

    1. Install yarn npm i -g yarn
    2. Go to directory where u install packages and run yarn command
    3. Yarn will init and create its yarn.lock file, now delete package-lock.json * Note
    4. In your package.json file replace in "scripts" all npm commands for yarn ** Note
    5. Run yarn dev or whatever command u use for running a yarn script => DONE

    * Note: it is important you don't delete it before yarn command (as some people suggest) it can break things, for example your yarn command will not even work and it will throw error:

    Error: ENOENT: no such file or directory, open './package-lock.json'
    

    ** Note: If you used

     "preinstall": "npx npm-force-resolutions",
    

    you can remove it, yarn is taking "resolutions" by default without a need for force :)