From 37be867a840c3f18597552fbf64499d5bda591a1 Mon Sep 17 00:00:00 2001 From: Filip Krumpe Date: Tue, 4 Jan 2022 09:19:20 +0100 Subject: [PATCH] Initial commit --- .gitignore | 1 + README.md | 34 +++++++++ app.py | 8 ++ webapp/.gitignore | 5 ++ webapp/README.md | 109 +++++++++++++++++++++++++++ webapp/package.json | 23 ++++++ webapp/public/favicon.png | Bin 0 -> 3127 bytes webapp/public/global.css | 63 ++++++++++++++++ webapp/public/index.html | 19 +++++ webapp/rollup.config.js | 76 +++++++++++++++++++ webapp/scripts/setupTypeScript.js | 121 ++++++++++++++++++++++++++++++ webapp/src/App.svelte | 30 ++++++++ webapp/src/main.js | 10 +++ 13 files changed, 499 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app.py create mode 100644 webapp/.gitignore create mode 100644 webapp/README.md create mode 100644 webapp/package.json create mode 100644 webapp/public/favicon.png create mode 100644 webapp/public/global.css create mode 100644 webapp/public/index.html create mode 100644 webapp/rollup.config.js create mode 100644 webapp/scripts/setupTypeScript.js create mode 100644 webapp/src/App.svelte create mode 100644 webapp/src/main.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ed8ebf5 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +__pycache__ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..ab4369f --- /dev/null +++ b/README.md @@ -0,0 +1,34 @@ +# Project template + +This is a project template for creating a [Svelte](https://svelte.dev/) app with a python backend. + +The template requires [npm](https://www.npmjs.com/) and [Flask](https://flask.palletsprojects.com/en/2.0.x/) to be installed. + +## Quickstart + +Run npm install in the webapp component to instanciate the modules required by svelte: +``` + cd webapp + # to use Typescript run: + # Node scripts/setupTypeScrupt.js + npm install + # to start a local development server for the svelte app only: + npm run dev +``` + +For using the flask server you need to compile your Svelte App. +You need to repeat this on every change before restarting the flask server. + +In the webapp folder do +``` + npm run build +``` + +After that you need to activate the flask server. + +In the project folder do: +``` + flask run +``` + +Navigate to [http://127.0.0.1:5000/index.html](http://127.0.0.1:5000/index.html) to see the result \ No newline at end of file diff --git a/app.py b/app.py new file mode 100644 index 0000000..bf79932 --- /dev/null +++ b/app.py @@ -0,0 +1,8 @@ +from flask import Flask, send_from_directory + +app = Flask(__name__) + +@app.route("/") +def svelte_client(path): + print(f"Trying to return {path}") + return send_from_directory("webapp/public/", path) \ No newline at end of file diff --git a/webapp/.gitignore b/webapp/.gitignore new file mode 100644 index 0000000..b4d9579 --- /dev/null +++ b/webapp/.gitignore @@ -0,0 +1,5 @@ +/node_modules/ +/public/build/ + +.DS_Store +package-lock.json diff --git a/webapp/README.md b/webapp/README.md new file mode 100644 index 0000000..76c32b5 --- /dev/null +++ b/webapp/README.md @@ -0,0 +1,109 @@ +*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.* + +*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [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 +``` + +If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte). + +## 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 +``` diff --git a/webapp/package.json b/webapp/package.json new file mode 100644 index 0000000..03cd455 --- /dev/null +++ b/webapp/package.json @@ -0,0 +1,23 @@ +{ + "name": "svelte-app", + "version": "1.0.0", + "private": true, + "scripts": { + "build": "rollup -c", + "dev": "rollup -c -w", + "start": "sirv public --no-clear" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^17.0.0", + "@rollup/plugin-node-resolve": "^11.0.0", + "rollup": "^2.3.4", + "rollup-plugin-css-only": "^3.1.0", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-svelte": "^7.0.0", + "rollup-plugin-terser": "^7.0.0", + "svelte": "^3.0.0" + }, + "dependencies": { + "sirv-cli": "^1.0.0" + } +} diff --git a/webapp/public/favicon.png b/webapp/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645 GIT binary patch literal 3127 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 + + + + + + Svelte app + + + + + + + + + +
+ + diff --git a/webapp/rollup.config.js b/webapp/rollup.config.js new file mode 100644 index 0000000..e8965ec --- /dev/null +++ b/webapp/rollup.config.js @@ -0,0 +1,76 @@ +import svelte from 'rollup-plugin-svelte'; +import commonjs from '@rollup/plugin-commonjs'; +import resolve from '@rollup/plugin-node-resolve'; +import livereload from 'rollup-plugin-livereload'; +import { terser } from 'rollup-plugin-terser'; +import css from 'rollup-plugin-css-only'; + +const production = !process.env.ROLLUP_WATCH; + +function serve() { + let server; + + function toExit() { + if (server) server.kill(0); + } + + return { + writeBundle() { + if (server) return; + server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { + stdio: ['ignore', 'inherit', 'inherit'], + shell: true + }); + + process.on('SIGTERM', toExit); + process.on('exit', toExit); + } + }; +} + +export default { + input: 'src/main.js', + output: { + sourcemap: true, + format: 'iife', + name: 'app', + file: 'public/build/bundle.js' + }, + plugins: [ + svelte({ + compilerOptions: { + // enable run-time checks when not in production + dev: !production + } + }), + // we'll extract any component CSS out into + // a separate file - better for performance + css({ output: 'bundle.css' }), + + // 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/plugins/tree/master/packages/commonjs + resolve({ + browser: true, + dedupe: ['svelte'] + }), + commonjs(), + + // In dev mode, call `npm run start` once + // the bundle has been generated + !production && serve(), + + // Watch the `public` directory and refresh the + // browser on changes when not in production + !production && livereload('public'), + + // If we're building for production (npm run build + // instead of npm run dev), minify + production && terser() + ], + watch: { + clearScreen: false + } +}; diff --git a/webapp/scripts/setupTypeScript.js b/webapp/scripts/setupTypeScript.js new file mode 100644 index 0000000..133658a --- /dev/null +++ b/webapp/scripts/setupTypeScript.js @@ -0,0 +1,121 @@ +// @ts-check + +/** This script modifies the project to support TS code in .svelte files like: + + + + As well as validating the code for CI. + */ + +/** To work on this script: + rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template +*/ + +const fs = require("fs") +const path = require("path") +const { argv } = require("process") + +const projectRoot = argv[2] || path.join(__dirname, "..") + +// Add deps to pkg.json +const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8")) +packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { + "svelte-check": "^2.0.0", + "svelte-preprocess": "^4.0.0", + "@rollup/plugin-typescript": "^8.0.0", + "typescript": "^4.0.0", + "tslib": "^2.0.0", + "@tsconfig/svelte": "^2.0.0" +}) + +// Add script for checking +packageJSON.scripts = Object.assign(packageJSON.scripts, { + "check": "svelte-check --tsconfig ./tsconfig.json" +}) + +// Write the package JSON +fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " ")) + +// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too +const beforeMainJSPath = path.join(projectRoot, "src", "main.js") +const afterMainTSPath = path.join(projectRoot, "src", "main.ts") +fs.renameSync(beforeMainJSPath, afterMainTSPath) + +// Switch the app.svelte file to use TS +const appSveltePath = path.join(projectRoot, "src", "App.svelte") +let appFile = fs.readFileSync(appSveltePath, "utf8") +appFile = appFile.replace(" + +
+

Hello {name}!

+

Visit the Svelte tutorial to learn how to build Svelte apps.

+
+ + \ No newline at end of file diff --git a/webapp/src/main.js b/webapp/src/main.js new file mode 100644 index 0000000..48498f3 --- /dev/null +++ b/webapp/src/main.js @@ -0,0 +1,10 @@ +import App from './App.svelte'; + +const app = new App({ + target: document.querySelector('#svelte-app'), + props: { + name: 'world' + } +}); + +export default app; \ No newline at end of file