initial commit
This commit is contained in:
commit
3c981cd1d4
9 changed files with 3302 additions and 0 deletions
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
public/bundle.*
|
66
README.md
Normal file
66
README.md
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
# svelte app
|
||||||
|
|
||||||
|
This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template.
|
||||||
|
|
||||||
|
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g degit # you only need to do this once
|
||||||
|
|
||||||
|
degit sveltejs/template svelte-app
|
||||||
|
cd svelte-app
|
||||||
|
```
|
||||||
|
|
||||||
|
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||||
|
|
||||||
|
|
||||||
|
## Get started
|
||||||
|
|
||||||
|
Install the dependencies...
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd svelte-app
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
...then start Rollup:
|
||||||
|
|
||||||
|
```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.
|
||||||
|
|
||||||
|
|
||||||
|
## Deploying to the web
|
||||||
|
|
||||||
|
### With [now](https://zeit.co/now)
|
||||||
|
|
||||||
|
Install `now` if you haven't already:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g now
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, from within your project folder:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
|
||||||
|
|
||||||
|
### With [surge](https://surge.sh/)
|
||||||
|
|
||||||
|
Install `surge` if you haven't already:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g surge
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, from within your project folder:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
surge public
|
||||||
|
```
|
3082
package-lock.json
generated
Normal file
3082
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
package.json
Normal file
19
package.json
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "svelte-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"devDependencies": {
|
||||||
|
"rollup": "^0.45.2",
|
||||||
|
"rollup-plugin-buble": "^0.15.0",
|
||||||
|
"rollup-plugin-commonjs": "^8.0.2",
|
||||||
|
"rollup-plugin-node-resolve": "^3.0.0",
|
||||||
|
"rollup-plugin-svelte": "^3.0.0",
|
||||||
|
"rollup-plugin-uglify": "^2.0.1",
|
||||||
|
"rollup-watch": "^4.3.1",
|
||||||
|
"serve": "^6.0.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "rollup -c",
|
||||||
|
"dev": "serve public & rollup -c -w",
|
||||||
|
"start": "serve public"
|
||||||
|
}
|
||||||
|
}
|
61
public/global.css
Normal file
61
public/global.css
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
html, body {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(0,100,200);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(0,80,160);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
border-color: #666;
|
||||||
|
}
|
16
public/index.html
Normal file
16
public/index.html
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf8'>
|
||||||
|
<meta name='viewport' content='width=device-width'>
|
||||||
|
|
||||||
|
<title>Svelte app</title>
|
||||||
|
|
||||||
|
<link rel='stylesheet' href='global.css'>
|
||||||
|
<link rel='stylesheet' href='bundle.css'>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script src='bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
40
rollup.config.js
Normal file
40
rollup.config.js
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
import svelte from 'rollup-plugin-svelte';
|
||||||
|
import resolve from 'rollup-plugin-node-resolve';
|
||||||
|
import commonjs from 'rollup-plugin-commonjs';
|
||||||
|
import buble from 'rollup-plugin-buble';
|
||||||
|
import uglify from 'rollup-plugin-uglify';
|
||||||
|
|
||||||
|
const production = !process.env.ROLLUP_WATCH;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
entry: 'src/main.js',
|
||||||
|
dest: 'public/bundle.js',
|
||||||
|
format: 'iife',
|
||||||
|
moduleName: 'app',
|
||||||
|
sourceMap: true,
|
||||||
|
plugins: [
|
||||||
|
svelte({
|
||||||
|
// we'll extract any component CSS out into
|
||||||
|
// a separate file — better for performance
|
||||||
|
css: css => {
|
||||||
|
css.write('public/bundle.css');
|
||||||
|
},
|
||||||
|
|
||||||
|
// this results in smaller CSS files
|
||||||
|
cascade: false
|
||||||
|
}),
|
||||||
|
|
||||||
|
// If you have external dependencies installed from
|
||||||
|
// npm, you'll most likely need these plugins. In
|
||||||
|
// some cases you'll need additional configuration —
|
||||||
|
// consult the documentation for details:
|
||||||
|
// https://github.com/rollup/rollup-plugin-commonjs
|
||||||
|
resolve(),
|
||||||
|
commonjs(),
|
||||||
|
|
||||||
|
// If we're building for production (npm run build
|
||||||
|
// instead of npm run dev), transpile and minify
|
||||||
|
production && buble({ exclude: 'node_modules/**' }),
|
||||||
|
production && uglify()
|
||||||
|
]
|
||||||
|
};
|
7
src/App.html
Normal file
7
src/App.html
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<h1>Hello {{name}}!</h1>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
</style>
|
8
src/main.js
Normal file
8
src/main.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import App from './App.html';
|
||||||
|
|
||||||
|
window.app = new App({
|
||||||
|
target: document.body,
|
||||||
|
data: {
|
||||||
|
name: 'world'
|
||||||
|
}
|
||||||
|
});
|
Loading…
Reference in a new issue