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

Question

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.

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

Evered

Answer 1

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 :)

Cosher

In a step 3 I said you can delete package-lock.json but you actually must delete it since it can clash with yarn.lock I had problem with it before on Netlify - it wouldn't build/deploy with both files in project folder. – Zurheide

Answer 2

It's quite simple; follow those instructions:

1. Verify that Yarn is installed on your machine globally, else use npm install -g yarn to install it.
2. Go to your root project directory and type yarn on your CLI; Yarn can consume the same package.json format as npm, and can install any package from the npm registry.

For more details, check the official yarn doc.

Milfordmilhaud

In that case can i delete package-lock.json file? – Glary

of course, you could. Yarn lock file will be created automatically. – Milfordmilhaud

As of Yarn 1.7, you can also just use yarn import and it will attempt to replicate the same dependencies found in package-lock.json. – Yiddish

Answer 3

You need not to do anything to switch from npm to yarn as long as yarn is installed in your Computer. Also to install packages using yarn, you should run the command yarn rather than yarn install which is equivalent to npm install. Because yarn is nothing stand alone library. Yarn is only a new CLI client that fetches modules from the npm registry. Nothing about the registry itself will change — you’ll still be able to fetch and publish packages as normal.

For more information about yarn you should read This

Oneiromancy

Wrong, you cannot use yarn and npm in the same time. Some servers even crash build when they see package-json.lock and yarn.lock in the same time (experienced that with Netlify). I suggest following my step by step answer. – Zurheide