[Configuring JAVA project related environment from 0 2] node.js + front end from configuration to operation

write at the front

The laboratory computer needs to run a JAVA project with separate front-end and back-end, so we started to reconfigure it
It took 6 hours to configure the environment + modify the code for all (database + back-end + front-end). Including encountering various pitfalls, but overall there are not many detours
If you follow this blog, you can theoretically avoid the pitfalls I encountered hh


Please add image description

For front-end developers, we haven’t left anything out either. The article will introduce in detail how to install Node.js and run the front-end project, including how to deal with common errors and configuration issues. Through this article, you will not only be able to set up a complete Java project development environment, but also gain practical tips for dealing with potential problems.

let's start!

1. Install node.js

Node.js download address: https://nodejs.org/en
Just download version 20.10.0, and it will be installed by default after downloading

Insert image description here

Enter node -v on the command line after the installation is complete. If the version is displayed, the installation is successful

Insert image description here

2. Run the front-end project

To run the front-end code and configure dependencies, you can follow the instructions provided in the README file. These instructions are usually for setting up the project, installing dependencies, running the development server, and building the production version.

Here is a basic step-by-step guide:

  1. Make sure your computer has Node.js and npm installed.

  2. Project setup: This is the first step to install the dependencies required for the project. You need to run npm install from the command line. This will install all required dependencies based on the dependencies listed in the package.json file.

  3. Compiles and hot-reloads for development (Compiles and hot-reloads for development) : This step is to run the development server. With the command npm run serve, the project starts a local server and usually automatically reloads the page when the code changes.

  4. Compiles and minifies for production (Compiles and minifies for production): Use the npm run build command when you are ready to deploy the application to a production environment. This creates a compressed and optimized version, usually placed in the project's dist/ or build/ directory.

Before you begin, make sure you are in the folder that contains your front-end code. This means that you should open the command line tool in the directory containing the package.json file.

Here are the specific steps:

1. runnpm install

Run npm install to install all dependencies.

Insert image description here

2. runnpm run serve

For development, run npm run serve. This usually starts a development server on a port on localhost (e.g. http://localhost:8080).
Insert image description here

Report an errorError: error:0308010C:digital envelope routines::unsupported

The error message you encountered is due to a version compatibility issue with Node.js. The errorError: error:0308010C:digital envelope routines::unsupportedis usually related to the version of the Node.js encryption library and OpenSSL. This issue is more common in Node.js 17 and above, especially when they are used with old or incompatible dependencies.

Method 1: Setup NODE_OPTIONS (useless)

One way to resolve this issue is to enable these older encryption algorithms by setting an environment variable. You can allow the use of these algorithms by setting the NODE_OPTIONS environment variable before running the project.

In Windows PowerShell, you can set this environment variable with the following command:

$env:NODE_OPTIONS = "openssl-legacy-provider"
set NODE_OPTIONS=--openssl-legacy-provider

Insert image description here
Insert image description here

Then try running your project again:

npm run serve

The benefit of this approach is that it requires no code or project configuration changes.

Method 2: Change Node.js version

If the above method doesn't work or you don't want to use the old encryption algorithm, you may consider downgrading Node.js to an older version, such as 16.x. Lower versions of Node.js do not suffer from this specific compatibility issue. You can easily switch versions of Node.js using NVM (Node Version Manager).

Method 3: Update dependencies (used this, successfully solved)

Sometimes, older versions of project dependencies may not be compatible with the latest version of Node.js. Checking and updating your project dependencies may help resolve this issue. Dependencies can be updated by running npm update.

Method 4: Check webpack configuration

As mentioned in the errorwebpack you may want to check and make sure your webpack configuration is compatible with the Node.js version you are using. Make sure the webpack and related loaders/plugins you use are up to date.

3. Runnpm run build

When you are ready to deploy the project to production, run npm run build.
Insert image description here

4. Front-end access

#账名
admin

#Mitsuko
666666

Running successfully!


If you have any questions, please ask and communicate!

Guess you like

Origin blog.csdn.net/wtyuong/article/details/134841311