Initialize loco app
This commit is contained in:
Dylan Knutson
31
frontend/.gitignore
vendored
Normal file
31
frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist-ssr
|
||||
dist/
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Common local dotenv files popularised by Create React App & Next.js
|
||||
# https://rsbuild.dev/guide/advanced/env-vars#env-file
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.production.local
|
||||
.env.test.local
|
||||
42
frontend/README.md
Normal file
42
frontend/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# SaaS Frontend
|
||||
|
||||
## Batteries included
|
||||
|
||||
- [TypeScript](https://www.typescriptlang.org/): A typed superset of JavaScript
|
||||
- [Rsbuild](https://rsbuild.dev/): A Rust-based web build tool
|
||||
- [Biome](https://biomejs.dev/): A Rust-based formatter and sensible linter for the web
|
||||
- [React](https://reactjs.org/): A JavaScript library for building user interfaces
|
||||
|
||||
If you don't like React for some reason, Rsbuild makes it easy to replace it with something else!
|
||||
|
||||
# Development
|
||||
|
||||
To get started with the development of the SaaS frontend, follow these steps:
|
||||
|
||||
### 1. Install Packages
|
||||
|
||||
Use the following command to install the required packages using pnpm:
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 2. Run in Development Mode
|
||||
|
||||
Once the packages are installed, run your frontend application in development mode with the following command:
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
This will start the development frontend server serving via vit
|
||||
|
||||
### 3. Build The application
|
||||
|
||||
To build your application run the following command:
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
|
||||
After the build `dist` folder is ready to served by loco. run loco `cargo loco start` and the frontend application will served via Loco
|
||||
24
frontend/biome.json
Normal file
24
frontend/biome.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
|
||||
"organizeImports": {
|
||||
"enabled": true
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true
|
||||
}
|
||||
},
|
||||
"javascript": {
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space"
|
||||
}
|
||||
},
|
||||
"json": {
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space"
|
||||
}
|
||||
}
|
||||
}
|
||||
24
frontend/package.json
Normal file
24
frontend/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "rsbuild dev --open",
|
||||
"build": "rsbuild build",
|
||||
"lint": "biome check src/",
|
||||
"preview": "rsbuild preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1",
|
||||
"@rsbuild/core": "^1",
|
||||
"@rsbuild/plugin-react": "^1",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
20
frontend/rsbuild.config.ts
Normal file
20
frontend/rsbuild.config.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { defineConfig } from "@rsbuild/core";
|
||||
import { pluginReact } from "@rsbuild/plugin-react";
|
||||
|
||||
// https://rsbuild.dev/guide/basic/configure-rsbuild
|
||||
export default defineConfig({
|
||||
plugins: [pluginReact()],
|
||||
html: {
|
||||
favicon: "src/assets/favicon.ico",
|
||||
title: "Loco SaaS Starter",
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://127.0.0.1:5150",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
105
frontend/src/LocoSplash.tsx
Normal file
105
frontend/src/LocoSplash.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
export const LocoSplash = () => {
|
||||
return (
|
||||
<div>
|
||||
<header className="navbar fixed-top">
|
||||
<div className="container">
|
||||
<a href="https://loco.rs?ref=starter">Loco</a>
|
||||
<ul className="navbar-nav ">
|
||||
<li className="">
|
||||
<a
|
||||
className=""
|
||||
href="https://github.com/loco-rs/loco?ref=starter"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<title>Loco GitHub repo</title>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li className="">
|
||||
<a
|
||||
className=""
|
||||
href="https://github.com/loco-rs/loco/stargazers?ref=starter"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
className="feather feather-star"
|
||||
>
|
||||
<title>Loco GitHub stars</title>
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div className="logo">
|
||||
<h1>Loco: SaaS application</h1>
|
||||
<img src="https://loco.rs/icon.svg" className="logo" alt="Loco logo" />
|
||||
</div>
|
||||
<footer>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://loco.rs?ref=starter"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Our Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/loco-rs/loco?ref=starter"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/loco-rs/loco/issues?ref=starter"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Found a bug?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/loco-rs/loco/discussions?ref=starter"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Needs help?
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
BIN
frontend/src/assets/favicon.ico
Normal file
BIN
frontend/src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
frontend/src/env.d.ts
vendored
Normal file
1
frontend/src/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="@rsbuild/core/types" />
|
||||
100
frontend/src/index.css
Normal file
100
frontend/src/index.css
Normal file
@@ -0,0 +1,100 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Arimo", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
background: #212529;
|
||||
color: #dee2e6;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(29, 45, 53, 0)
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #dee2e6;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1320px;
|
||||
padding-right: var(--bs-gutter-x, 24px);
|
||||
padding-left: var(--bs-gutter-x, 24px);
|
||||
margin-right: auto;
|
||||
margin-left: auto
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-nav li {
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1rem;
|
||||
padding-top: 6rem !important
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-bottom: 1px solid #2a2f34;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 250px;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer ul li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
footer ul li:not(:last-child) {
|
||||
border-right: 1px solid #ccc;
|
||||
padding-right: 5px;
|
||||
height: 15px;
|
||||
}
|
||||
17
frontend/src/index.tsx
Normal file
17
frontend/src/index.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { LocoSplash } from "./LocoSplash";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
if (!root) {
|
||||
throw new Error("No root element found");
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(root).render(
|
||||
<React.StrictMode>
|
||||
<LocoSplash />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
15
frontend/tsconfig.json
Normal file
15
frontend/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["DOM", "ES2020"],
|
||||
"module": "ESNext",
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
"moduleResolution": "bundler",
|
||||
"useDefineForClassFields": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Reference in New Issue
Block a user