Showing
20 changed files
with
431 additions
and
0 deletions
.gitignore
0 → 100644
app/docker-compose.yml
0 → 100644
1 | +version: "3" | ||
2 | +services: | ||
3 | + | ||
4 | + web: | ||
5 | + image: nginx | ||
6 | + container_name: nginx | ||
7 | + ports: | ||
8 | + - "8081:80" | ||
9 | + networks: | ||
10 | + mynet: | ||
11 | + ipv4_address: 172.28.0.2 | ||
12 | + volumes: | ||
13 | + - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf | ||
14 | + - ./web:/var/www/html | ||
15 | + restart: on-failure | ||
16 | + links: | ||
17 | + - app | ||
18 | + | ||
19 | + svelte: | ||
20 | + image: node | ||
21 | + container_name: svelte | ||
22 | + working_dir: /var/www/html | ||
23 | + volumes: | ||
24 | + - ./web:/var/www/html | ||
25 | + command: bash -c "npm install && npm run dev" | ||
26 | + restart: on-failure | ||
27 | + | ||
28 | + app: | ||
29 | + image: node | ||
30 | + container_name: node | ||
31 | + ports: | ||
32 | + - "8082:80" | ||
33 | + networks: | ||
34 | + mynet: | ||
35 | + ipv4_address: 172.28.0.3 | ||
36 | + working_dir: /app | ||
37 | + volumes: | ||
38 | + - ./node:/app | ||
39 | + - ./config:/app/config | ||
40 | + command: bash -c "npm install && node app.js" | ||
41 | + environment: | ||
42 | + - NODE_ENV=production | ||
43 | + restart: on-failure | ||
44 | + | ||
45 | +networks: | ||
46 | + mynet: | ||
47 | + ipam: | ||
48 | + driver: default | ||
49 | + config: | ||
50 | + - subnet: 172.28.0.0/16 | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
app/nginx/nginx.conf
0 → 100644
1 | +server { | ||
2 | + listen 80; | ||
3 | + server_name localhost; | ||
4 | + access_log /var/log/nginx/access.log.1; | ||
5 | + error_log /var/log/nginx/error.log.1; | ||
6 | + | ||
7 | + location /api { | ||
8 | + proxy_pass http://172.28.0.3; | ||
9 | + } | ||
10 | + | ||
11 | + location / { | ||
12 | + root /var/www/html/public; | ||
13 | + index index.html; | ||
14 | + } | ||
15 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
app/node/app.js
0 → 100644
1 | +let express = require('express'); | ||
2 | +let app = express(); | ||
3 | +let bodyParser = require('body-parser'); | ||
4 | +let routes = require('./routes'); | ||
5 | + | ||
6 | +app.use(bodyParser.urlencoded({ extended: false })); | ||
7 | +app.use(bodyParser.json()); | ||
8 | + | ||
9 | +app.get('/api/home', routes.home); | ||
10 | + | ||
11 | +let server = app.listen(80); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
app/node/package-lock.json
0 → 100644
This diff is collapsed. Click to expand it.
app/node/package.json
0 → 100644
1 | +{ | ||
2 | + "name": "node", | ||
3 | + "version": "1.0.0", | ||
4 | + "description": "", | ||
5 | + "main": "app.js", | ||
6 | + "scripts": { | ||
7 | + "test": "echo \"Error: no test specified\" && exit 1" | ||
8 | + }, | ||
9 | + "author": "", | ||
10 | + "license": "ISC", | ||
11 | + "dependencies": { | ||
12 | + "express": "^4.17.1", | ||
13 | + "http": "0.0.1-security" | ||
14 | + } | ||
15 | +} |
app/node/routes/home.js
0 → 100644
app/node/routes/index.js
0 → 100644
app/web/.gitignore
0 → 100644
app/web/README.md
0 → 100644
1 | +*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* | ||
2 | + | ||
3 | +--- | ||
4 | + | ||
5 | +# svelte app | ||
6 | + | ||
7 | +This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. | ||
8 | + | ||
9 | +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): | ||
10 | + | ||
11 | +```bash | ||
12 | +npx degit sveltejs/template svelte-app | ||
13 | +cd svelte-app | ||
14 | +``` | ||
15 | + | ||
16 | +*Note that you will need to have [Node.js](https://nodejs.org) installed.* | ||
17 | + | ||
18 | + | ||
19 | +## Get started | ||
20 | + | ||
21 | +Install the dependencies... | ||
22 | + | ||
23 | +```bash | ||
24 | +cd svelte-app | ||
25 | +npm install | ||
26 | +``` | ||
27 | + | ||
28 | +...then start [Rollup](https://rollupjs.org): | ||
29 | + | ||
30 | +```bash | ||
31 | +npm run dev | ||
32 | +``` | ||
33 | + | ||
34 | +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. | ||
35 | + | ||
36 | +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`. | ||
37 | + | ||
38 | + | ||
39 | +## Building and running in production mode | ||
40 | + | ||
41 | +To create an optimised version of the app: | ||
42 | + | ||
43 | +```bash | ||
44 | +npm run build | ||
45 | +``` | ||
46 | + | ||
47 | +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). | ||
48 | + | ||
49 | + | ||
50 | +## Single-page app mode | ||
51 | + | ||
52 | +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. | ||
53 | + | ||
54 | +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: | ||
55 | + | ||
56 | +```js | ||
57 | +"start": "sirv public --single" | ||
58 | +``` | ||
59 | + | ||
60 | + | ||
61 | +## Deploying to the web | ||
62 | + | ||
63 | +### With [now](https://zeit.co/now) | ||
64 | + | ||
65 | +Install `now` if you haven't already: | ||
66 | + | ||
67 | +```bash | ||
68 | +npm install -g now | ||
69 | +``` | ||
70 | + | ||
71 | +Then, from within your project folder: | ||
72 | + | ||
73 | +```bash | ||
74 | +cd public | ||
75 | +now deploy --name my-project | ||
76 | +``` | ||
77 | + | ||
78 | +As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. | ||
79 | + | ||
80 | +### With [surge](https://surge.sh/) | ||
81 | + | ||
82 | +Install `surge` if you haven't already: | ||
83 | + | ||
84 | +```bash | ||
85 | +npm install -g surge | ||
86 | +``` | ||
87 | + | ||
88 | +Then, from within your project folder: | ||
89 | + | ||
90 | +```bash | ||
91 | +npm run build | ||
92 | +surge public my-project.surge.sh | ||
93 | +``` |
app/web/package-lock.json
0 → 100644
This diff is collapsed. Click to expand it.
app/web/package.json
0 → 100644
1 | +{ | ||
2 | + "name": "svelte-app", | ||
3 | + "version": "1.0.0", | ||
4 | + "scripts": { | ||
5 | + "build": "rollup -c", | ||
6 | + "dev": "rollup -c -w", | ||
7 | + "start": "sirv public" | ||
8 | + }, | ||
9 | + "devDependencies": { | ||
10 | + "@rollup/plugin-commonjs": "11.0.2", | ||
11 | + "@rollup/plugin-node-resolve": "^7.0.0", | ||
12 | + "rollup": "^1.20.0", | ||
13 | + "rollup-plugin-livereload": "^1.0.0", | ||
14 | + "rollup-plugin-svelte": "^5.0.3", | ||
15 | + "rollup-plugin-terser": "^5.1.2", | ||
16 | + "svelte": "^3.0.0" | ||
17 | + }, | ||
18 | + "dependencies": { | ||
19 | + "rollup-plugin-copy": "^3.3.0", | ||
20 | + "sirv-cli": "^0.4.4", | ||
21 | + "svelte-spa-router": "^2.1.0" | ||
22 | + } | ||
23 | +} |
app/web/public/favicon.png
0 → 100644
3.05 KB
app/web/public/global.css
0 → 100644
1 | +html, body { | ||
2 | + position: relative; | ||
3 | + width: 100%; | ||
4 | + height: 100%; | ||
5 | +} | ||
6 | + | ||
7 | +body { | ||
8 | + color: #333; | ||
9 | + margin: 0; | ||
10 | + padding: 8px; | ||
11 | + box-sizing: border-box; | ||
12 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | ||
13 | +} | ||
14 | + | ||
15 | +a { | ||
16 | + color: rgb(0,100,200); | ||
17 | + text-decoration: none; | ||
18 | +} | ||
19 | + | ||
20 | +a:hover { | ||
21 | + text-decoration: underline; | ||
22 | +} | ||
23 | + | ||
24 | +a:visited { | ||
25 | + color: rgb(0,80,160); | ||
26 | +} | ||
27 | + | ||
28 | +label { | ||
29 | + display: block; | ||
30 | +} | ||
31 | + | ||
32 | +input, button, select, textarea { | ||
33 | + font-family: inherit; | ||
34 | + font-size: inherit; | ||
35 | + padding: 0.4em; | ||
36 | + margin: 0 0 0.5em 0; | ||
37 | + box-sizing: border-box; | ||
38 | + border: 1px solid #ccc; | ||
39 | + border-radius: 2px; | ||
40 | +} | ||
41 | + | ||
42 | +input:disabled { | ||
43 | + color: #ccc; | ||
44 | +} | ||
45 | + | ||
46 | +input[type="range"] { | ||
47 | + height: 0; | ||
48 | +} | ||
49 | + | ||
50 | +button { | ||
51 | + color: #333; | ||
52 | + background-color: #f4f4f4; | ||
53 | + outline: none; | ||
54 | +} | ||
55 | + | ||
56 | +button:disabled { | ||
57 | + color: #999; | ||
58 | +} | ||
59 | + | ||
60 | +button:not(:disabled):active { | ||
61 | + background-color: #ddd; | ||
62 | +} | ||
63 | + | ||
64 | +button:focus { | ||
65 | + border-color: #666; | ||
66 | +} |
app/web/public/index.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html lang="en"> | ||
3 | +<head> | ||
4 | + <meta charset='utf-8'> | ||
5 | + <meta name='viewport' content='width=device-width,initial-scale=1'> | ||
6 | + | ||
7 | + <title>Svelte app</title> | ||
8 | + | ||
9 | + <link rel='icon' type='image/png' href='/favicon.png'> | ||
10 | + <link rel='stylesheet' href='/global.css'> | ||
11 | + <link rel='stylesheet' href='/build/bundle.css'> | ||
12 | + | ||
13 | + <script defer src='/build/bundle.js'></script> | ||
14 | +</head> | ||
15 | + | ||
16 | +<body> | ||
17 | +</body> | ||
18 | +</html> |
app/web/rollup.config.js
0 → 100644
1 | +import svelte from 'rollup-plugin-svelte'; | ||
2 | +import resolve from '@rollup/plugin-node-resolve'; | ||
3 | +import commonjs from '@rollup/plugin-commonjs'; | ||
4 | +import livereload from 'rollup-plugin-livereload'; | ||
5 | +import { terser } from 'rollup-plugin-terser'; | ||
6 | +import copy from 'rollup-plugin-copy'; | ||
7 | + | ||
8 | +const production = !process.env.ROLLUP_WATCH; | ||
9 | + | ||
10 | +export default { | ||
11 | + input: 'src/main.js', | ||
12 | + output: { | ||
13 | + sourcemap: true, | ||
14 | + format: 'iife', | ||
15 | + name: 'app', | ||
16 | + file: 'public/build/bundle.js' | ||
17 | + }, | ||
18 | + plugins: [ | ||
19 | + svelte({ | ||
20 | + // enable run-time checks when not in production | ||
21 | + dev: !production, | ||
22 | + // we'll extract any component CSS out into | ||
23 | + // a separate file - better for performance | ||
24 | + css: css => { | ||
25 | + css.write('public/build/bundle.css'); | ||
26 | + } | ||
27 | + }), | ||
28 | + | ||
29 | + // If you have external dependencies installed from | ||
30 | + // npm, you'll most likely need these plugins. In | ||
31 | + // some cases you'll need additional configuration - | ||
32 | + // consult the documentation for details: | ||
33 | + // https://github.com/rollup/plugins/tree/master/packages/commonjs | ||
34 | + resolve({ | ||
35 | + browser: true, | ||
36 | + dedupe: ['svelte'] | ||
37 | + }), | ||
38 | + commonjs(), | ||
39 | + | ||
40 | + copy({ | ||
41 | + targets:[ | ||
42 | + { src:'src/images', dest:'public' } | ||
43 | + ] | ||
44 | + }), | ||
45 | + | ||
46 | + // In dev mode, call `npm run start` once | ||
47 | + // the bundle has been generated | ||
48 | + !production && serve(), | ||
49 | + | ||
50 | + // Watch the `public` directory and refresh the | ||
51 | + // browser on changes when not in production | ||
52 | + !production && livereload('public'), | ||
53 | + | ||
54 | + // If we're building for production (npm run build | ||
55 | + // instead of npm run dev), minify | ||
56 | + production && terser() | ||
57 | + ], | ||
58 | + watch: { | ||
59 | + clearScreen: false | ||
60 | + } | ||
61 | +}; | ||
62 | + | ||
63 | +function serve() { | ||
64 | + let started = false; | ||
65 | + | ||
66 | + return { | ||
67 | + writeBundle() { | ||
68 | + if (!started) { | ||
69 | + started = true; | ||
70 | + | ||
71 | + require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { | ||
72 | + stdio: ['ignore', 'inherit', 'inherit'], | ||
73 | + shell: true | ||
74 | + }); | ||
75 | + } | ||
76 | + } | ||
77 | + }; | ||
78 | +} |
app/web/src/App.svelte
0 → 100644
app/web/src/main.js
0 → 100644
app/web/src/routes.js
0 → 100644
app/web/src/routes/Home.svelte
0 → 100644
1 | +<main> | ||
2 | + <h1>Hello, This is Home!</h1> | ||
3 | + <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> | ||
4 | +</main> | ||
5 | + | ||
6 | +<style> | ||
7 | + main { | ||
8 | + text-align: center; | ||
9 | + padding: 1em; | ||
10 | + max-width: 240px; | ||
11 | + margin: 0 auto; | ||
12 | + } | ||
13 | + | ||
14 | + h1 { | ||
15 | + color: #ff3e00; | ||
16 | + text-transform: uppercase; | ||
17 | + font-size: 4em; | ||
18 | + font-weight: 100; | ||
19 | + } | ||
20 | + | ||
21 | + @media (min-width: 640px) { | ||
22 | + main { | ||
23 | + max-width: none; | ||
24 | + } | ||
25 | + } | ||
26 | +</style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment