root
/
wails-pure-js-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed some typo and changed tab size

main
KiddoV 2023-10-03 13:13:24 -05:00
parent d071d8ddff
commit 6691cce276
4 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -1,17 +1,17 @@
## About ## About
This is an extremely straightforward Wails template, comprising essential web components (HTML, CSS, JS) and intentionally lacking any front-end frameworks, dependencies, or Node package management. As a result, you'll end up with an exceptionally lightweight source folder (1 - 5MB). This is an extremely straightforward Wails template, comprising essential web components (HTML, CSS, JS) and intentionally lacking any front-end frameworks, dependencies, or Node package management.
That being said, this is a good template for something like a ``Hello World`` application, which doesn't require you to store ~200-300MB of source files. As a result, you'll end up with an exceptionally lightweight source folder (1 - 5MB).
You'll need to construct everything from the ground up. Good luck! That being said, this is a good template for something like a ``Hello World`` application, which doesn't require you to store ~200-300MB of source files.
## Instruction ## Instruction
1. Do all the setup/ installation for [Wails](https://wails.io/docs/gettingstarted/installation). 1. Do all the setup/ installation for [Wails](https://wails.io/docs/gettingstarted/installation).
2. Open command prompt on your desire directory. 2. Open command prompt on your desire directory.
3. ``$> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template`` 3. ``> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template``
4. ``$> cd ./[your-app-name]`` 4. ``> cd ./[your-app-name]``
5. ``$> wails dev`` 5. ``> wails dev``
6. Keep developing... 6. Keep developing...
## Live Development ## Live Development
@ -34,7 +34,9 @@ To use ``UPX``, you need to download and at least put the path in the ``System E
You don't have to rely on ``npm`` to add dependencies. You don't have to rely on ``npm`` to add dependencies.
If your application requires internet access, you can add dependencies via a ``CDN`` links. If your application requires internet access, you can add dependencies via a ``CDN`` links.
If your application is used offline, simply download dependencies and save them in the ``src/libs`` folder, then import them in the index.html file. If your application is used offline, simply download dependencies and save them in the ``src/libs`` folder, then import them in the index.html file.
E.g. E.g.
```html ```html
<script src="../libs/jquery/jquery-3.7.1.js"></script> <script src="../libs/jquery/jquery-3.7.1.js"></script>

2
frontend/src/index.html
View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<!-- Main Srcs --> <!-- Main Source Files -->
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
<script src="main.js"></script> <script src="main.js"></script>
</head> </head>

7
frontend/src/main.css
View File

@ -7,17 +7,14 @@ html {
body { body {
margin: 0; margin: 0;
color: white; color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
} }
@font-face { @font-face {
font-family: "Nunito"; font-family: "Nunito";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local(""), src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
} }
#app main{ #app main{