feat: Working local dev solidjs with routing w/o cors problems
This commit is contained in:
parent
e535e868e3
commit
ee2286043e
23
.editorconfig
Normal file
23
.editorconfig
Normal file
@ -0,0 +1,23 @@
|
||||
# Some docs: https://EditorConfig.org
|
||||
|
||||
root = true # top-most EditorConfig file
|
||||
|
||||
[*]
|
||||
end_of_line = lf # unix style line endings
|
||||
insert_final_newline = false # newline at end of file
|
||||
charset = utf-8 # encoding
|
||||
max_line_length = 90 # Suggested maximum of 90 characters per line
|
||||
|
||||
[*.{js,ts,jsx,tsx}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
quote_type = single
|
||||
|
||||
[*.py]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
quote_type = single
|
||||
|
||||
[*.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
7
.prettierrc.json
Normal file
7
.prettierrc.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"printWidth": 90,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"jsxSingleQuote": true
|
||||
}
|
0
rust_solid_cassandra/frontend/.projectile
Normal file
0
rust_solid_cassandra/frontend/.projectile
Normal file
1205
rust_solid_cassandra/frontend/package-lock.json
generated
1205
rust_solid_cassandra/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,11 +10,15 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.19",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.8.2",
|
||||
"vite": "^3.0.9",
|
||||
"vite-plugin-solid": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@solidjs/router": "^0.5.1",
|
||||
"solid-js": "^1.5.1"
|
||||
}
|
||||
}
|
||||
|
6
rust_solid_cassandra/frontend/postcss.config.js
Normal file
6
rust_solid_cassandra/frontend/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
@ -1,26 +1,17 @@
|
||||
import type { Component } from 'solid-js';
|
||||
|
||||
import logo from './logo.svg';
|
||||
import styles from './App.module.css';
|
||||
import { Route, Routes } from "@solidjs/router";
|
||||
import { Component, lazy } from "solid-js";
|
||||
// Only load the components if we are navigating to them
|
||||
const Home = lazy(() => import("./pages/Home"));
|
||||
const Login = lazy(() => import("./pages/Login"));
|
||||
|
||||
const App: Component = () => {
|
||||
return (
|
||||
<div class={styles.App}>
|
||||
<header class={styles.header}>
|
||||
<img src={logo} class={styles.logo} alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
class={styles.link}
|
||||
href="https://github.com/solidjs/solid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn Solid
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
<>
|
||||
<Routes>
|
||||
<Route path={["login", "register"]} component={Login} />
|
||||
<Route path={["/", "*"]} component={Home} />
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
58
rust_solid_cassandra/frontend/src/api/RestClient.ts
Normal file
58
rust_solid_cassandra/frontend/src/api/RestClient.ts
Normal file
@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Author: phga
|
||||
* Date: 2022-11-23T23:57
|
||||
* Description: This is a rudimentary REST Client created while
|
||||
* evaluating different technologies for GLOU
|
||||
*/
|
||||
|
||||
const BACKEND_SERVER_URL = 'localhost:6969';
|
||||
// Helper function to do the actual fetching from our backend
|
||||
// For now we always send/receive json -> For a real world example make this more variable
|
||||
const do_fetch = async (
|
||||
method: string,
|
||||
path: string,
|
||||
payload?: string
|
||||
): Promise<unknown | string> => {
|
||||
try {
|
||||
const req = await fetch(`https://${BACKEND_SERVER_URL}${path}`, {
|
||||
method,
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': `${BACKEND_SERVER_URL}`,
|
||||
'Access-Control-Allow-Credentials': 'true',
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: payload,
|
||||
});
|
||||
|
||||
const res = await req.text();
|
||||
return JSON.parse(res);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const GET = async (path: string): Promise<unknown | string> => {
|
||||
return do_fetch('GET', path);
|
||||
};
|
||||
const POST = async (path: string, payload?: string): Promise<unknown | string> => {
|
||||
return do_fetch('POST', path, payload);
|
||||
};
|
||||
const PUT = async (path: string, payload?: string): Promise<unknown | string> => {
|
||||
return do_fetch('PUT', path, payload);
|
||||
};
|
||||
const DELETE = async (path: string): Promise<unknown | string> => {
|
||||
return do_fetch('DELETE', path);
|
||||
};
|
||||
|
||||
// The actual RestClient we will use in our frontend
|
||||
// It does not support all REST methods for this evaluation
|
||||
const RestClient = {
|
||||
GET,
|
||||
POST,
|
||||
PUT,
|
||||
DELETE,
|
||||
};
|
||||
|
||||
export default RestClient;
|
@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
|
@ -1,7 +1,15 @@
|
||||
/* @refresh reload */
|
||||
import { render } from 'solid-js/web';
|
||||
import { render } from "solid-js/web";
|
||||
import { Router } from "@solidjs/router";
|
||||
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
|
||||
render(() => <App />, document.getElementById('root') as HTMLElement);
|
||||
render(
|
||||
() => (
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
),
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
|
11
rust_solid_cassandra/frontend/src/pages/Home.tsx
Normal file
11
rust_solid_cassandra/frontend/src/pages/Home.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { Component } from "solid-js";
|
||||
|
||||
const Home: Component = () => {
|
||||
return (
|
||||
<>
|
||||
<h1 class="text-4xl">Home</h1>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
31
rust_solid_cassandra/frontend/src/pages/Login.tsx
Normal file
31
rust_solid_cassandra/frontend/src/pages/Login.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { Component } from 'solid-js';
|
||||
import RestClient from '../api/RestClient';
|
||||
|
||||
const Login: Component = () => {
|
||||
const TEST_USER = {
|
||||
id: '310c0d24-cc2e-4798-a259-0d49bf2e3a5a',
|
||||
hash: 'MEIN_HASH',
|
||||
login: 'phga',
|
||||
salt: 'MEIN_SALZ',
|
||||
};
|
||||
|
||||
const btnPrimary =
|
||||
'inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out';
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 class='text-4xl'>Login</h1>
|
||||
<button class={btnPrimary} onClick={() => RestClient.GET('/')}>
|
||||
GET_HOME
|
||||
</button>
|
||||
<button
|
||||
class={btnPrimary}
|
||||
onClick={() => RestClient.POST('/login', JSON.stringify(TEST_USER))}
|
||||
>
|
||||
POST_LOGIN
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
8
rust_solid_cassandra/frontend/tailwind.config.js
Normal file
8
rust_solid_cassandra/frontend/tailwind.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user