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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
## Get started
Install the dependencies...
```bash
cd svelte-app
npm install
```
...then start [Rollup](https://rollupjs.org):
```bash
npm run dev
```
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
## Building and running in production mode
To create an optimised version of the app:
```bash
npm run build
```
You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
## Single-page app mode
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
```js
"start": "sirv public --single"
```
# Develop
This application uses Svelte and Typescript.
## Svelte
Svelte is a tool for building fast web applications, similar to React, Angular, or Vue.
We highly recommend going through the [quick tutorial that Svelte maintainers have prepared](https://svelte.dev/tutorial/basics).
## Typescript
Typescript is a superset of Javascript. It is statically typed (strong typing enforcement like in C or C++) as opposed to the dynamically typed Javascript (what are types?). Typescript is also more object-oriented (supports interfaces for example), while Javascript is a more prototype based language.
Typescript is compiled into Javascript by the TSC compiler. Install `Node.js` on your system and then use npm to install the compiler
```bash
npm install -g typescript
```
Then you can compile a typescript file as such
```bash
tsc app.ts
```
and then run the compiled js file using `node` as such
```bash
node app.js
```
Although, this should ideally be handled by an npm `package.json` script as in this project.
**package.json**
```js
{
"name": "typescript-project",
"version": "1.0.0",
"main": "app.js",
"devDependencies": {
"typescript": "^4.7.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node out/app.js",
"prestart": "npm run build",
"build": "tsc"
}
}
```
**tsconfig.json**
```js
{
"compilerOptions": {
"outDir": "./out",
"rootDir": "./src",
"sourceMap": true,
"moduleResolution": "node",
"target": "es6"
}
}
```
The above would be a standalone typescript project.
```
typescript-project
|-node_modules/
|-out/
|-app.js
|-app.js.map
|-src/
|-app.ts
|-package.json
|-package-lock.json
|-tsconfig.json
```
If we were to using Svelte as in this project, then
the `package.json` script would use `rollup` instead
of `node`.
|
