https://github.com/juliencrn/svelte-life-in-weeks
Mini front-end project to discover Svelte
https://github.com/juliencrn/svelte-life-in-weeks
svelte tailwindcss typescript
Last synced: 4 months ago
JSON representation
Mini front-end project to discover Svelte
- Host: GitHub
- URL: https://github.com/juliencrn/svelte-life-in-weeks
- Owner: juliencrn
- Created: 2021-07-25T01:59:34.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-06T01:08:41.000Z (about 4 years ago)
- Last Synced: 2024-10-06T01:41:39.992Z (about 1 year ago)
- Topics: svelte, tailwindcss, typescript
- Language: Svelte
- Homepage: https://life-in-weeks.juliencaron.com/
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Life in weeks
My first project in Svelte, a mini web app who show you how many weeks you have lived and approximately how many you have left.
---
This little front-end project has been built only for fun, to discover how work Svelte.js. It was ~~copied~~ strongly inspired by [4K WEEKS](https://4kweeks.com/).
Note: The site saves your birthday in your browser using LocalStorage to persist the week grid between sessions. Thank to that, you can add this page to your browser welcome page to keep focus.
---
## Below, default Svelte readme
*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
---
# svelte app
This is a project template for [Svelte](https://svelte.dev) 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
npx 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](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"
```
## Using TypeScript
This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
```bash
node scripts/setupTypeScript.js
```
Or remove the script via:
```bash
rm scripts/setupTypeScript.js
```
## Deploying to the web
### With [Vercel](https://vercel.com)
Install `vercel` if you haven't already:
```bash
npm install -g vercel
```
Then, from within your project folder:
```bash
cd public
vercel deploy --name my-project
```
### 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 my-project.surge.sh
```