Skip to content

Instantly share code, notes, and snippets.

@frankievalentine

frankievalentine/App.svelte

Last active October 21, 2020 05:25
Show Gist options
  • Save frankievalentine/563b7f8230da08e5fcc5d4856cff67ab to your computer and use it in GitHub Desktop.
Save frankievalentine/563b7f8230da08e5fcc5d4856cff67ab to your computer and use it in GitHub Desktop.
Download ZIP
svelte-parcel
Raw
README.md

Directory Setup

├── public
│   ├── favicon.ico
│   ├── global.css
│   ├── robots.txt
├── src
│   ├── App.svelte
│   ├── index.js
├── index.html
└── package.json
Raw
App.svelte
<script>
export let name;
</script>
<style>
h1 {
text-align: center;
}
</style>
<h1>Hello {name}!</h1>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" />
<title>Svelte with Parcel</title>
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
Raw
index.js
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'Svelte',
},
});
export default app;
Raw
package.json
"browserslist": [
"last 1 chrome versions"
],
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
}
Raw
steps.sh
mkdir [dirname]
cd [dirname]
yarn init -y
git init
touch .gitignore && echo -e "node_modules\nyarn.lock\nyarn-error.log\ndist\n.cache\n.env" >> .gitignore
yarn add -D svelte parcel-plugin-svelte parcel-bundler @babel/polyfill
mkdir src && cd src && mkdir components && mkdir css
cd ..
touch index.html index.js
cd components && touch App.svelte && cd .. && cd css && touch index.scss && cd ..
code .
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment