Introduction to Node.js and How to Create a Project
Let's install Node.js(npm, npx) and Learn to create a Project.
Introduction to Node.js and How to Create a Project
The first concepts I needed to understand were Node.js, which enables JavaScript to run outside the browser (on a server), and npm and npx, which are tools for managing JavaScript packages. (Of course, learning JavaScript is essential too, but since the syntax doesn’t seem too difficult, I decided to skip that part for now.)
Install Node.js, npm and npx
Node.js
Node.js is a JavaScript runtime environment. Originally, JavaScript could only be executed within a web browser. However, thanks to Node.js, it became possible to run JavaScript directly on a server(or your computer), just like other programming languages. This is what we refer to as a “runtime.”
Download and Install Node.js and npm
You can download the Windows Installer (.msi) from the Node.js official website and proceed with the installation. The website provides installation files for each operating system, so you can simply download and install the one that matches your system. One One thing to keep in mind is that when you install Node.js, npm (Node Package Manager) and npx (Node Package Execute) are installed along with it.
npm official website
npm(Node Package Manager)
With npm (Node Package Manager), you can install countless JavaScript packages.
It allows you to easily use various libraries and tools in your development process. You can browse these packages on the npm official website.
You’ll also notice that the framework we’ll be using Svelte is available there as well.
npx(Node Package Execute)
In addition to npm, you’ll also be able to use a tool called npx, which is bundled with npm (version 5.2.0 and higher).
npx stands for Node Package Execute. Unlike npm, which installs packages globally or locally, npx is used to run packages without having to install them permanently. This is especially useful when you want to run a one-time command-line tool or quickly scaffold a new project.
For example, to create a new SvelteKit project, you might use the following command:
npx sv create my-app
This command downloads the sv package temporarily and runs it to scaffold a new SvelteKit application in the my-app directory — all without having to globally install the package.
In short, npx makes development more convenient by reducing clutter in your global or local dependencies, and allowing you to use tools only when you need them.
Create a Project(with npm)
The entire process
The entire process is as follows:
Create a directory for the project.npm init
To start using npm in your project, you create apackage.jsonMake index.html and index.jsnpm install <package-name> --verbosenpm install --verbosenode index.js
You can execute your script using Node.jsnpm run xxx(e.g. dev/test/start/build ...)
You can add the relevant content to thescriptssection inpackage.jsonand run it.
The steps to create and build a Dockerfile are as follows.
Make dockerfiledocker build -t npm-study .docker run -d -p 3000:3000 --name npm-study npm-study
Initialize npm
To start using npm in your project, you first need to create a package.json file. This file holds metadata about the project and its dependencies.
npm init
if you want to quickly generate one with default settings:npm init -y
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (01.npm-study)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
license: (ISC)
About to write to D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study\package.json:
{
"name": "01.npm-study",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Is this OK? (yes) yes
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study>
After running npm init, you’ll have a structure like:
1
2
01.npm-study/
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
# package.json
{
"name": "01.npm-study",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Make index.html and index.js
Let’s create a simple index.html file along with an index.js file. While working on this, I was able to gain a bit of understanding about JavaScript functions. Arrow functions are actually the recommended style in Svelte as well.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Serve</title>
</head>
<body>
<h1>Hello from Static HTML!</h1>
<script src="index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// index.js
function factorial(n) {
if (n === 0 || n === 1) return 1;
return n * factorial(n - 1);
}
const arrow_factorial = (n) => {
if (n === 0 || n === 1) return 1;
return n * factorial(n - 1);
};
const result = factorial(5);
const arrow_result = arrow_factorial(5);
console.log("[Function] 5! is", result);
console.log("[Arrow Function] 5! is", arrow_result);
Install Packages
If you install packages, a node_modules folder and package-lock.json will also appear. Let’s install a package using the following command:
npm install <package-name> --verbose- To see detailed logs during install: –verbose
1
2
3
4
5
6
7
8
9
10
11
12
# Let's install `serve` to quickly set up a simple web server.
# For high-performance or security-critical services, using `Nginx` is also a good option.
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> npm install serve
up to date, audited 89 packages in 1s
24 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study>
After running npm install <package-name>, you’ll have a structure like:
1
2
3
4
5
6
my-project/
├── node_modules/ # Adding
├── index.html
├── index.js
├── package.json
└── package-lock.json # Adding
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# package.json
{
"name": "01.npm-study",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" # command: `npm run test`
},
"author": "",
"license": "ISC",
"description": "", # Adding
"dependencies": {
"serve": "^14.2.4" # Adding
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# package-lock.json
{
"name": "01.npm-study",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "01.npm-study",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"serve": "^14.2.4"
}
},
"node_modules/@zeit/schemas": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz",
"integrity": "sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==",
"license": "MIT"
},
"node_modules/accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
"license": "MIT",
"dependencies": {
"mime-types": "~2.1.34",
"negotiator": "0.6.3"
},
"engines": {
"node": ">= 0.6"
}
},
.....
"node_modules/wrap-ansi": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
"license": "MIT",
"dependencies": {
"ansi-styles": "^6.1.0",
"string-width": "^5.0.1",
"strip-ansi": "^7.0.1"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
}
}
}
If you clone someone else’s project that includes a package.json, you can install all required packages with:
npm install --verbose
Execute the Node.js file
if you want to execute your script using Node.js:
node index.js
1
2
3
4
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> node index.js
[Function] 5! is 120
[Arrow Function] 5! is 120
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study>
Running Scripts
You can define and run custom scripts in package.json:
npm run xxx(e.g. dev/test/start/build ...)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# package.json
{
"name": "01.npm-study",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", # command: `npm run test`
"testdir": "dir", # Add it manually, When you run `npm run dev`, the `dir` command will be executed.
"dev": "serve .",
"start": "serve ."
},
"author": "",
"license": "ISC",
"description": "", # Adding
"dependencies": {
"serve": "^14.2.4" # Adding
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
S D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> npm run test
> 01.npm-study@1.0.0 test
> echo "Error: no test specified" && exit 1
"Error: no test specified"
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> npm run testdir
> 01.npm-study@1.0.0 testdir
> dir
D 드라이브의 볼륨: AIResearcher
볼륨 일련 번호: D22F-F334
D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study 디렉터리
2025-04-04 오후 04:59 <DIR> .
2025-04-04 오후 04:59 <DIR> ..
2025-04-04 오후 04:59 <DIR> node_modules
2025-04-04 오후 04:59 554 package-lock.json
2025-04-04 오후 05:12 276 package.json
2개 파일 830 바이트
3개 디렉터리 366,700,564,480 바이트 남음
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> npm run dev
> 01.npm-study@1.0.0 dev
> serve .
┌─────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://180.227.217.220:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└─────────────────────────────────────────────┘
Run Project
Make dockerfile
1
2
3
4
5
6
7
8
9
10
11
12
13
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
Build image and Run container
docker build -t npm-study .docker run -p 3000:3000 --name npm-study npm-study
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
(base) jaoneol@DESKTOP-B7GM3C5:/mnt/d/02.MyCode/GP-MyReference/21.MySvelte/01.npm-study$ docker build -t npm-study .
[+] Building 7.0s (11/11) FINISHED docker:default
=> [internal] load build definition from dockerfile 0.0s
=> => transferring dockerfile: 458B 0.0s
=> [internal] load metadata for docker.io/library/node:20-alpine 1.7s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [1/5] FROM docker.io/library/node:20-alpine@sha256:8bda036ddd59ea51a23bc1a1035d3b5c614e72c01366d989f4120e8adca196d4 0.0s
=> [internal] load build context 2.0s
=> => transferring context: 4.75MB 2.0s
=> CACHED [2/5] WORKDIR /app 0.0s
=> [3/5] COPY package*.json ./ 0.1s
=> [4/5] RUN npm install 2.8s
=> [5/5] COPY . . 0.1s
=> exporting to image 0.1s
=> => exporting layers 0.1s
=> => writing image sha256:481da273490e734e5e8d4eff8e2052460fb5fc3546e54ba8f7e3412586f90fc1 0.0s
=> => naming to docker.io/library/npm-study 0.0s
(base) jaoneol@DESKTOP-B7GM3C5:/mnt/d/02.MyCode/GP-MyReference/21.MySvelte/01.npm-study$ docker run -p 3000:3000 --name npm-study npm-study
> 01.npm-study@1.0.0 start
> serve .
INFO Accepting connections at http://localhost:3000
Uninstall Packages
To uninstall a package:
npm uninstall <package-name>
1
2
3
4
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study> npm uninstall serve
removed 1 package, and audited 1 package in 521ms
found 0 vulnerabilities
PS D:\02.MyCode\GP-MyReference\21.MySvelte\01.npm-study>
By looking at the dependencies section in package.json, you can confirm that the uninstalled lodash has been removed.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"name": "01.npm-study",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "dir",
"start": "serve ."
},
"author": "",
"license": "ISC",
"description": ""
}
Create a Project(with npx)
We’ll use the Svelte framework to create the project using npx.
The detailed explanation will be covered later, so for now, just focus on how to create the project.
If you’re exploring multiple frameworks or just want to understand how Vite works, then npm create vite@latest is a flexible choice(Not recommended for me.).
- Comparison:
npx sv createvsnpm create vite@latest
| Feature | npx sv create <project-name> | npm create vite@latest <project-name> |
|---|---|---|
| Purpose | Specifically for SvelteKit projects | Generic Vite project generator |
| Framework | SvelteKit only | Supports multiple frameworks (React, Vue, Svelte, etc.) |
| Template Options | Minimal, demo, library (SvelteKit-specific) | Choose framework and variants |
| Official Tool | From the Svelte team (sv) | From the Vite team (create-vite) |
| Project Structure | Optimized for SvelteKit | Depends on chosen framework |
Create Project
Since I’m new to SvelteKit, I’ll proceed with the demo option. OpenWebUI is built with SvelteKit, TypeScript, and Tailwind CSS, so I’ll choose the same setup and follow along.
npx sv create <project-name>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
PS D:\02.MyCode\GP-MyReference\21.MySvelte> npx sv create 02.npx-study
┌ Welcome to the Svelte CLI! (v0.8.0)
│
◇ Which template would you like?
│ SvelteKit demo
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◆ Project created
│
◇ What would you like to add to your project? (use arrow keys / space bar)
│ prettier, eslint, tailwindcss
│
◇ tailwindcss: Which plugins would you like to add?
│ typography
│
◆ Successfully setup add-ons
│
◇ Which package manager do you want to install dependencies with?
│ npm
│
◆ Successfully installed dependencies
│
◇ Successfully formatted modified files
│
◇ Project next steps ─────────────────────────────────────────────────────╮
│ │
│ 1: cd 02.npx-study │
│ 2: git init && git add -A && git commit -m "Initial commit" (optional) │
│ 3: npm run dev -- --open │
│ │
│ To close the dev server, hit Ctrl-C │
│ │
│ Stuck? Visit us at https://svelte.dev/chat │
│ │
├──────────────────────────────────────────────────────────────────────────╯
│
└ You're all set!
PS D:\02.MyCode\GP-MyReference\21.MySvelte>
After running, you’ll have a structure like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
02.npx-study/
├── src/ # Root directory for application source code
│ ├── lib/ # Reusable libraries or assets
│ │ └── images/ # Static image assets
│ │ ├── github.svg
│ │ ├── svelte-logo.svg
│ │ ├── svelte-welcome.png
│ │ └── svelte-welcome.webp
│ │
│ ├── routes/ # SvelteKit file-based routing system
│ │ ├── about/ # Route for /about
│ │ ├── sverdle/ # Route for /sverdle
│ │ ├── +layout.svelte # Shared layout for all nested routes
│ │ ├── +page.svelte # Page component for the root route (/)
│ │ ├── +page.ts # Server-side load function for the root route
│ │ ├── Counter.svelte # Reusable Svelte component
│ │ └── Header.svelte # Reusable header component
│ │
│ ├── app.css # Global CSS styles
│ ├── app.d.ts # Global TypeScript type declarations
│ └── app.html # HTML template for the app's root
│
├── static/ # Public static files served at root URL
│ ├── favicon.png # Site favicon
│ └── robots.txt # SEO/crawling rules for search engines
│
├── .gitignore # Files and folders to exclude from Git
├── .npmrc # npm configuration
├── .prettierignore # Files ignored by Prettier
├── .prettierrc # Prettier formatting rules
├── eslint.config.js # ESLint configuration for linting
├── package-lock.json # npm dependency lock file
├── package.json # Project metadata and dependencies
├── README.md # Project documentation
├── svelte.config.js # SvelteKit configuration (adapter, paths, etc.)
├── tsconfig.json # TypeScript compiler options
└── vite.config.ts # Vite build configuration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# package.json
{
"name": "02.npx-study",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .",
"lint": "prettier --check . && eslint ."
},
"devDependencies": {
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
"@fontsource/fira-mono": "^5.0.0",
"@neoconfetti/svelte": "^2.0.0",
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/vite": "^4.0.0",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-svelte": "^3.0.0",
"globals": "^16.0.0",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.25.0",
"svelte-check": "^4.0.0",
"tailwindcss": "^4.0.0",
"typescript": "^5.0.0",
"typescript-eslint": "^8.20.0",
"vite": "^6.2.5"
}
}
Running Project
npm run dev
1
2
3
4
5
6
7
8
9
10
11
PS D:\02.MyCode\GP-MyReference\21.MySvelte\02.npx-study> npm run dev
> 02.npx-study@0.0.1 dev
> vite dev
VITE v6.2.6 ready in 790 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Run Project
Modify and Install Packages
I’ll configure the Dockerfile in a way that runs the Node.js server directly.
SvelteKit can only be run as a Node.js server when using adapter-node.
If you don’t switch to adapter-node or adapter-static, there won’t be any issues when running npm run dev, but the bundling process won’t proceed during npm run build. In other words, the build directory won’t be created, so you won’t be able to run node build.
Modify svelte.config.ts
- import adapter from '@sveltejs/adapter-auto;
+ import adapter from '@sveltejs/adapter-node;npm install -D @sveltejs/adapter-node
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
PS D:\02.MyCode\GP-MyReference\21.MySvelte\02.npx-study> npm install -D @sveltejs/adapter-node
added 17 packages, changed 1 package, and audited 201 packages in 10s
53 packages are looking for funding
run `npm fund` for details
4 low severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
PS D:\02.MyCode\GP-MyReference\21.MySvelte\02.npx-study>
Build Project
npm run build
An output directory is created inside .svelte-kit, and the build results are generated in the client and server directories respectively. At the same time, bundling is performed and the build directory is also created.
Two separate builds were done:
- SSR (Server-Side Rendering) build
- Client-side (browser) build
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
PS D:\02.MyCode\GP-MyReference\21.MySvelte\02.npx-study> npm run build
> 02.npx-study@0.0.1 build
> vite build
vite v6.2.6 building SSR bundle for production...
✓ 157 modules transformed.
vite v6.2.6 building for production...
✓ 134 modules transformed.
.svelte-kit/output/client/_app/version.json 0.03 kB │ gzip: 0.05 kB
.svelte-kit/output/client/.vite/manifest.json 2.70 kB │ gzip: 0.54 kB
.svelte-kit/output/client/_app/immutable/chunks/CjIeCOjy.js 0.03 kB │ gzip: 0.05 kB
.svelte-kit/output/client/_app/immutable/entry/start.BPjGDbez.js 0.08 kB │ gzip: 0.09 kB
.svelte-kit/output/client/_app/immutable/chunks/BkSfKe5A.js 0.32 kB │ gzip: 0.25 kB
.svelte-kit/output/client/_app/immutable/nodes/0.C5QJx2NF.js 0.33 kB │ gzip: 0.24 kB
.svelte-kit/output/client/_app/immutable/nodes/2.BFhy9sH0.js 0.35 kB │ gzip: 0.26 kB
.svelte-kit/output/client/_app/immutable/chunks/BgYBtL1E.js 0.99 kB │ gzip: 0.56 kB
.svelte-kit/output/client/_app/immutable/nodes/1.Ka-xCMO2.js 1.05 kB │ gzip: 0.61 kB
.svelte-kit/output/client/_app/immutable/chunks/D7GdVdQS.js 2.47 kB │ gzip: 1.36 kB
.svelte-kit/output/client/_app/immutable/entry/app.C0ODMoth.js 7.54 kB │ gzip: 3.59 kB
.svelte-kit/output/client/_app/immutable/chunks/CuL4E_CM.js 14.80 kB │ gzip: 5.96 kB
.svelte-kit/output/client/_app/immutable/chunks/RRbA5ktc.js 32.32 kB │ gzip: 12.59 kB
✓ built in 317ms
.svelte-kit/output/server/.vite/manifest.json 1.63 kB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js 0.17 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js 0.26 kB
.svelte-kit/output/server/internal.js 0.31 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js 1.87 kB
.svelte-kit/output/server/chunks/index.js 3.86 kB
.svelte-kit/output/server/chunks/exports.js 6.88 kB
.svelte-kit/output/server/chunks/internal.js 50.09 kB
.svelte-kit/output/server/index.js 106.31 kB
✓ built in 1.90s
Run npm run preview to preview your production build locally.
> Using @sveltejs/adapter-node
✔ done
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.svelte-kit/
└── output/
├── client/
│ ├── _app/
│ ├── .vite/
│ └── favicon.png
└── server/
├── .vite/
├── chunks/
├── entries/
├── nodes/
├── stylesheets/
├── index.js
├── internal.js
├── manifest-full.js
└── manifest.js
build/
├── client/
│ ├── _app/
│ └── favicon.png
└── server/
├── chunks/
├── index.js
├── index.js.map
├── manifest.js
└── manifest.js.map
├── env.js
├── handler.js
├── index.js # Note. When you run `node build`, it executes `node ./build/index.js`.
└── shims.js
Make dockerfile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# --- Stage 1: Build Stage ---
FROM node:20 AS builder
# Set working directory
WORKDIR /app
# Copy package files
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the source code
COPY . .
# Build the SvelteKit project
RUN npm run build
# --- Stage 2: Production Stage ---
FROM node:20-slim
# Set working directory
WORKDIR /app
# Copy package.json files for production install
COPY package*.json ./
# Install only production dependencies
RUN npm install --omit=dev
# Copy build output from builder
COPY --from=builder /app/build ./build
COPY --from=builder /app/.svelte-kit ./.svelte-kit
COPY --from=builder /app/static ./static
# Start the server
CMD ["node", "build"]
Build image and Run container
docker build -t npx-study .docker run -p 3000:3000 --name npx-study npx-study
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(base) jaoneol@DESKTOP-B7GM3C5:/mnt/d/02.MyCode/GP-MyReference/21.MySvelte/02.npx-study$ docker build -t npx-study .
[+] Building 22.2s (19/19) FINISHED docker:default
=> [internal] load build definition from dockerfile 0.0s
=> => transferring dockerfile: 555B 0.0s
=> [internal] load metadata for docker.io/library/node:20-alpine 1.6s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [builder 1/7] FROM docker.io/library/node:20-alpine@sha256:8bda036ddd59ea51a23bc1a1035d3b5c614e72c01366d989f4120e8adca196d4 0.0s
=> [internal] load build context 11.0s
=> => transferring context: 84.93MB 10.9s
=> CACHED [builder 2/7] WORKDIR /app 0.0s
=> [builder 3/7] COPY package*.json ./ 0.3s
=> [builder 4/7] COPY .npmrc .npmrc 0.0s
=> [builder 5/7] RUN npm ci 4.7s
=> [builder 6/7] COPY . . 0.6s
=> [builder 7/7] RUN npm run build 2.5s
=> [runner 3/8] COPY --from=builder /app/build ./build 0.0s
=> [runner 4/8] COPY --from=builder /app/package*.json ./ 0.1s
=> [runner 5/8] COPY --from=builder /app/.svelte-kit ./.svelte-kit 0.1s
=> [runner 6/8] COPY --from=builder /app/svelte.config.* ./ 0.1s
=> [runner 7/8] COPY --from=builder /app/src ./src 0.0s
=> [runner 8/8] RUN npm ci --omit=dev 0.6s
=> exporting to image 0.1s
=> => exporting layers 0.1s
=> => writing image sha256:ae981e9b33c9177373c6b3a8fd605c0bcdfd8a7c45eb09f5cddcde34731384b4 0.0s
=> => naming to docker.io/library/npx-study 0.0s
(base) jaoneol@DESKTOP-B7GM3C5:/mnt/d/02.MyCode/GP-MyReference/21.MySvelte/02.npx-study$
1
2
(base) jaoneol@DESKTOP-B7GM3C5:/mnt/d/02.MyCode/GP-MyReference/21.MySvelte/02.npx-study$ docker run -p 3000:3000 --name npx-study npx-study
Listening on http://0.0.0.0:3000
Run Project(Same result as npm run dev)
This post is licensed under CC BY 4.0 by the author.