e78e935 · setoelkahfi/personal-website

.gitignore

+1

@@ -13,6 +13,7 @@

13

14 # production

15 /build

16 +/server/build/*

17

18 # misc

19 .DS_Store

package-lock.json

+15 -4

@@ -11,7 +11,7 @@

11 "@babel/runtime": "^7.16.7",

12 "@types/jest": "^24.9.1",

13 "@types/node": "^13.13.52",

14 - "@types/react": "^16.14.21",

14 + "@types/react": "^16.14.43",

15 "@types/react-dom": "^16.9.14",

16 "@types/react-router-dom": "^5.3.2",

17 "axios": "^0.25.0",

@@ -32,6 +32,7 @@

32 "typescript": "^4.0.0"

33 },

34 "devDependencies": {

35 + "@types/dexie": "^1.3.1",

36 "@types/express": "^4.17.17",

37 "@types/react-intl": "^3.0.0"

38 }

@@ -4415,6 +4416,16 @@

4416 "@types/node": "*"

4417 }

4418 },

4419 + "node_modules/@types/dexie": {

4420 + "version": "1.3.1",

4421 + "resolved": "https://registry.npmjs.org/@types/dexie/-/dexie-1.3.1.tgz",

4422 + "integrity": "sha512-f4Gpv89MCwEl1r9LbLLHXzT2qduVUNfyj/sINrY7MXqZvSEGYZwEWLIUAnVD44YPt5/0tkNSK6wbyhpb9iF47A==",

4423 + "deprecated": "This is a stub types definition for Dexie.js (https://github.com/dfahlander/Dexie.js). Dexie.js provides its own type definitions, so you don't need @types/dexie installed!",

4424 + "dev": true,

4425 + "dependencies": {

4426 + "dexie": "*"

4427 + }

4428 + },

4429 "node_modules/@types/eslint": {

4430 "version": "8.44.1",

4431 "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",

@@ -4582,9 +4593,9 @@

4593 "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="

4594 },

4595 "node_modules/@types/react": {

4585 - "version": "16.14.21",

4586 - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.21.tgz",

4587 - "integrity": "sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==",

4596 + "version": "16.14.43",

4597 + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.43.tgz",

4598 + "integrity": "sha512-7zdjv7jvoLLQg1tTvpQsm+hyNUMT2mPlNV1+d0I8fbGhkJl82spopMyBlu4wb1dviZAxpGdk5eHu/muacknnfw==",

4599 "dependencies": {

4600 "@types/prop-types": "*",

4601 "@types/scheduler": "*",

package.json

+5 -3

@@ -6,7 +6,7 @@

6 "@babel/runtime": "^7.16.7",

7 "@types/jest": "^24.9.1",

8 "@types/node": "^13.13.52",

9 - "@types/react": "^16.14.21",

9 + "@types/react": "^16.14.43",

10 "@types/react-dom": "^16.9.14",

11 "@types/react-router-dom": "^5.3.2",

12 "axios": "^0.25.0",

@@ -30,8 +30,9 @@

30 "client:start": "PORT=3002 react-scripts start",

31 "client:build": "react-scripts build",

32 "client:test": "react-scripts test",

33 - "eject": "react-scripts eject",

34 - "server:start": "node server/server.js"

33 + "client:eject": "react-scripts eject",

34 + "server:build": "npx tsc --project ./tsconfig.server.json --outDir ./build",

35 + "server:start": "node ./build/server/server.js"

36 },

37 "eslintConfig": {

38 "extends": "react-app"

@@ -43,6 +44,7 @@

44 "not op_mini all"

45 ],

46 "devDependencies": {

47 + "@types/dexie": "^1.3.1",

48 "@types/express": "^4.17.17",

49 "@types/react-intl": "^3.0.0"

50 }

server/index.tsx deleted

-33

@@ -1,33 +0,0 @@

1 -import path from "path";

2 -import fs from "fs";

3 -

4 -import React from "react";

5 -import ReactDOMServer from "react-dom/server";

6 -import express from "express";

7 -

8 -const PORT = process.env.PORT || 3000;

9 -const app = express();

10 -

11 -app.get("/", (req, res) => {

12 - fs.readFile(path.resolve("./public/index.html"), "utf8", (err, data) => {

13 - if (err) {

14 - console.error(err);

15 - return res.status(500).send("An error occurred");

16 - }

17 -

18 - return res.send(

19 - data.replace(

20 - '<div id="root"></div>',

21 - `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`

22 - )

23 - );

24 - });

25 -});

26 -

27 -app.use(

28 - express.static(path.resolve(__dirname, ".", "dist"), { maxAge: "30d" })

29 -);

30 -

31 -app.listen(PORT, () => {

32 - console.log(`Server is listening on port ${PORT}`);

33 -});

\ No newline at end of file

server/server.tsx new

+42

@@ -0,0 +1,42 @@

1 +import express from 'express'

2 +import React from 'react'

3 +import ReactDOMServer from 'react-dom/server'

4 +import App from '../src/components/App'

5 +import path from 'path';

6 +import fs from 'fs';

7 +import { StaticRouter, matchPath } from 'react-router-dom';

8 +import routes from '../shared/routes';

9 +

10 +const server = express();

11 +

12 +server.use('/static', express.static('./build/static'));

13 +

14 +server.get('*', (req, res, next) => {

15 +

16 + const activeRoute = routes.find((route) =>

17 + matchPath(route.path, req.url)

18 + ) || {}

19 +

20 + const app = ReactDOMServer.renderToString(

21 + <StaticRouter location={req.url}>

22 + <App />

23 + </StaticRouter>

24 + );

25 +

26 + const indexFile = path.resolve('./build/index.html');

27 +

28 + fs.readFile(indexFile, 'utf8', (err, data) => {

29 + if (err) {

30 + console.error('Something went wrong:', err);

31 + return res.status(500).send('Oops, better luck next time!');

32 + }

33 +

34 + return res.send(

35 + data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)

36 + );

37 + });

38 +});

39 +

40 +server.listen(3002, () => {

41 + console.log(`Server running on http://localhost:3002`)

42 +})

\ No newline at end of file

shared/routes.tsx new

+16

@@ -0,0 +1,16 @@

1 +import Home from '../src/components/Home';

2 +import About from '../src/components/About';

3 +

4 +// Desc: Routes for the application

5 +const routes = [

6 + {

7 + path: '/',

8 + component: Home,

9 + },

10 + {

11 + path: '/about',

12 + component: About,

13 + }

14 +];

15 +

16 +export default routes;

\ No newline at end of file

src/components/App.tsx

+11 -14

@@ -3,7 +3,6 @@ import Header from './Header';

3 import Main from './Main';

4 import FooterLinks from './FooterLinks';

5 import { IntlProvider, addLocaleData } from 'react-intl';

6 -import { BrowserRouter } from 'react-router-dom';

6 import Firebase, { FirebaseContext } from '../components/Firebase';

7 import localeEn from 'react-intl/locale-data/en';

8 import localeSe from 'react-intl/locale-data/se';

@@ -23,12 +22,12 @@ import messagesEs from "../translations/es.json";

22 import messagesJa from "../translations/ja.json";

23

24 addLocaleData([

26 - ...localeEn,

27 - ...localeId,

28 - ...localeSe,

29 - ...localeDe,

30 - ...localeFr,

31 - ...localeZh,

25 + ...localeEn,

26 + ...localeId,

27 + ...localeSe,

28 + ...localeDe,

29 + ...localeFr,

30 + ...localeZh,

31 ...localeEs,

32 ...localeJa

33 ]);

@@ -79,13 +78,11 @@ class App extends Component<AppProps, AppState> {

78 render() {

79 return (

80 <IntlProvider locale={i18nConfig.language} messages={i18nConfig.messages}>

82 - <BrowserRouter>

83 - <FirebaseContext.Provider value={this.createFirebaseContextIfNeeded(i18nConfig.language)}>

84 - <Header onChangeLanguage={this.onChangeLanguage.bind(this)} />

85 - <Main />

86 - <FooterLinks />

87 - </FirebaseContext.Provider>

88 - </BrowserRouter>

81 + <FirebaseContext.Provider value={this.createFirebaseContextIfNeeded(i18nConfig.language)}>

82 + <Header onChangeLanguage={this.onChangeLanguage.bind(this)} />

83 + <Main />

84 + <FooterLinks />

85 + </FirebaseContext.Provider>

86 </IntlProvider >

87 );

88 }

src/components/Main.tsx

-1

@@ -48,7 +48,6 @@ const Main = () => (

48 {firebase => <Contact firebase={firebase} />}

49 </FirebaseContext.Consumer>

50 </Route>

51 - <Route exact path='/splitfire/:audio_id' render={(props) => <AudioPlayer audioFileId={props.match.params.audio_id} /> }/>

51 </Switch>

52 </div>

53 </div>

src/index.tsx

+10 -4

@@ -1,15 +1,21 @@

1 import React from 'react';

2 -import { render } from 'react-dom';

2 +import { hydrate } from 'react-dom';

3 import App from './components/App';

4 -import * as serviceWorker from './serviceWorker';

4 +//import * as serviceWorker from './serviceWorker';

5 import 'bootstrap/dist/css/bootstrap.css';

6 import axios from 'axios';

7 +import { BrowserRouter } from 'react-router-dom';

8

9 axios.defaults.baseURL = 'https://api.musik88.com/api/v1/';

10

10 -render(<App />, document.getElementById('root'));

11 +hydrate(

12 + <BrowserRouter>

13 + <App />

14 + </BrowserRouter>,

15 + document.getElementById('root')

16 +);

17

18 // If you want your app to work offline and load faster, you can change

19 // unregister() to register() below. Note this comes with some pitfalls.

20 // Learn more about service workers: http://bit.ly/CRA-PWA

15 -serviceWorker.unregister();

21 +//serviceWorker.unregister();

tsconfig.json

+1 -1

@@ -25,7 +25,7 @@

25 "noFallthroughCasesInSwitch": true

26 },

27 "include": [

28 - "src"

28 + "src", "server"

29 ],

30 "exclude": [

31 "node_modules",

tsconfig.server.json new

+22

@@ -0,0 +1,22 @@

1 +{

2 + "include": ["server"], // compile TS files in server directory

3 + "compilerOptions": {

4 + "module": "commonjs", // classic format that Node.js understands

5 + "esModuleInterop": true, // allow imports of modules in ES format

6 + "skipLibCheck": true, // only check types we refer to from our code

7 + "forceConsistentCasingInFileNames": true, // prevents cross-OS problems

8 + "resolveJsonModule": true, // enable import of JSON files

9 + "lib": ["es6", "dom"], // use JavaScript API ES6

10 + "target": "es6", // compile to ES6

11 + "jsx": "react", // compile JSX to React.createElement statements for SSR

12 + "allowJs": true, // allow import of JS modules

13 + // enable strict type checking

14 + "strict": true,

15 + "strictNullChecks": true,

16 + "noImplicitAny": true,

17 + "typeRoots": [

18 + "./types",

19 + "./node_modules/@types"

20 + ],

21 + }

22 + }

\ No newline at end of file

yarn.lock

+12 -5

@@ -2164,6 +2164,13 @@

2164 dependencies:

2165 "@types/node" "*"

2166

2167 +"@types/dexie@^1.3.1":

2168 + version "1.3.1"

2169 + resolved "https://registry.npmjs.org/@types/dexie/-/dexie-1.3.1.tgz"

2170 + integrity sha512-f4Gpv89MCwEl1r9LbLLHXzT2qduVUNfyj/sINrY7MXqZvSEGYZwEWLIUAnVD44YPt5/0tkNSK6wbyhpb9iF47A==

2171 + dependencies:

2172 + dexie "*"

2173 +

2174 "@types/eslint-scope@^3.7.3":

2175 version "3.7.4"

2176 resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz"

@@ -2371,10 +2378,10 @@

2378 dependencies:

2379 "@types/react" "*"

2380

2374 -"@types/react@*", "@types/react@^16", "@types/react@^16.14.21", "@types/react@>=16.14.8", "@types/react@>=16.9.11":

2375 - version "16.14.21"

2376 - resolved "https://registry.npmjs.org/@types/react/-/react-16.14.21.tgz"

2377 - integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==

2381 +"@types/react@*", "@types/react@^16", "@types/react@^16.14.43", "@types/react@>=16.14.8", "@types/react@>=16.9.11":

2382 + version "16.14.43"

2383 + resolved "https://registry.npmjs.org/@types/react/-/react-16.14.43.tgz"

2384 + integrity sha512-7zdjv7jvoLLQg1tTvpQsm+hyNUMT2mPlNV1+d0I8fbGhkJl82spopMyBlu4wb1dviZAxpGdk5eHu/muacknnfw==

2385 dependencies:

2386 "@types/prop-types" "*"

2387 "@types/scheduler" "*"

@@ -4078,7 +4085,7 @@ detect-port-alt@^1.1.6:

4085 address "^1.0.1"

4086 debug "^2.6.0"

4087

4081 -dexie@^3.2.0:

4088 +dexie@*, dexie@^3.2.0:

4089 version "3.2.0"

4090 resolved "https://registry.npmjs.org/dexie/-/dexie-3.2.0.tgz"

4091 integrity sha512-OpS8ss1CLHYAhxRu6hT+/Gt1uLhKCf0O18xHBdRGlemOWXXRiiOZ0ty1/bACIJzGt1DGmvarzrPwYYt9EkRZfw==

This is works