boilerplate

.babelrc

@@ -0,0 +1,16 @@
+{
+	"presets": [
+		[
+			"@babel/env", {
+				useBuiltIns: "usage",
+				corejs: 3,
+			}
+		],
+		"@babel/typescript",
+		"@babel/react",
+	],
+	"plugins": [
+		"@babel/proposal-class-properties",
+		"@babel/proposal-object-rest-spread",
+	]
+}

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+	'env': {
+		'browser': true,
+		'es2021': true,
+		'node': true,
+	},
+	'extends': [
+		'plugin:react/recommended',
+		'google',
+	],
+	'parser': '@typescript-eslint/parser',
+	'parserOptions': {
+		'ecmaFeatures': {
+			'jsx': true,
+		},
+		'ecmaVersion': 12,
+		'sourceType': 'module',
+	},
+	'plugins': [
+		'react',
+		'@typescript-eslint',
+	],
+	'settings': {
+		'react': {
+		'version': 'detect',
+	  },
+	},
+	'rules': {
+		'indent': ['error', "tab"],
+		'no-tabs': ['error', {'allowIndentationTabs': true}],
+		'max-len': ['error', {'tabWidth': 4}],
+	},
+  };
+  

.gitignore

@@ -0,0 +1,113 @@
+# vim
+*.swp
+*.swo
+*~
+
+# build and dev
+build
+dev
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

config/tsconfig.client.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"target": "es5",
+		"declarationDir": "../dist/types"
+	},
+	"include": [
+		"../src/client/**/*"
+	]
+}

config/tsconfig.server.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"target": "es6",
+		"declarationDir": "../dist/types"
+	},
+	"include": [
+		"../src/server/**/*"
+	]
+}

config/webpack.client.common.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const nodeExternals = require('webpack-node-externals');
+const EsLint = require('eslint-webpack-plugin');
+
+module.exports = {
+	entry: path.resolve(__dirname, '../src/client/main.tsx'),
+	output: {
+		filename: 'bundle.js',
+		path: path.resolve(__dirname, '../dist/client'),
+	},
+	target: 'web',
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.json']
+	},
+	module: {
+		rules: [{
+			test: /\.tsx?$/,
+			loader: 'babel-loader',
+			include: path.join(__dirname, '../src/client'),
+		}],
+	},
+	plugins: [
+		new EsLint({
+			extensions: ['.ts', '.tsx'],
+			context: path.join(__dirname, '../src/client'),
+		}),
+	],
+};

config/webpack.client.dev.js

@@ -0,0 +1,9 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.client.common.js');
+
+module.exports = merge(common, {
+	devtool: 'eval-cheap-module-source-map',
+	mode: 'development',
+	watch: true
+});

config/webpack.client.prod.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.client.common.js');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = merge(common, {
+	mode: 'production',
+	optimization: {
+		minimize: true,
+		minimizer: [new TerserPlugin({
+			parallel: true
+		})]
+	}
+});

config/webpack.server.common.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const nodeExternals = require('webpack-node-externals');
+const EsLint = require('eslint-webpack-plugin');
+
+module.exports = {
+	entry: path.resolve(__dirname, '../src/server/main.ts'),
+	output: {
+		filename: 'bundle.js',
+		path: path.resolve(__dirname, '../dist/server'),
+	},
+	target: 'node',
+	externals: [nodeExternals()],
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.json']
+	},
+	module: {
+		rules: [{
+			test: /\.tsx?$/,
+			loader: 'babel-loader',
+			include: path.join(__dirname, '../src/server'),
+		}],
+	},
+	plugins: [
+		new EsLint({
+			extensions: ['.ts', '.tsx'],
+			context: path.join(__dirname, '../src/client'),
+		}),
+	],
+};

config/webpack.server.dev.js

@@ -0,0 +1,9 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.server.common.js');
+
+module.exports = merge(common, {
+	devtool: 'eval-cheap-module-source-map',
+	mode: 'development',
+	watch: true
+});

config/webpack.server.prod.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.server.common.js');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = merge(common, {
+	mode: 'production',
+	optimization: {
+		minimize: true,
+		minimizer: [new TerserPlugin({
+			parallel: true
+		})]
+	}
+});

nodemon.json

@@ -0,0 +1,6 @@
+{
+	"watch": ["src/server"],
+	"ext": "ts,json",
+	"ignore": ["src/**/*.spec.ts"],
+	"exec": "ts-node ./src/server/main.ts"
+  }

package.json

@@ -0,0 +1,69 @@
+{
+  "name": "expo-web",
+  "version": "1.0.0",
+  "description": "The web version of my digital art exhibition",
+  "scripts": {
+    "type-check:server": "tsc --pretty --project config/tsconfig.server.json --noEmit",
+    "type-check:client": "tsc --pretty --project config/tsconfig.client.json --noEmit",
+    "type-check": "concurrently \"npm:type-check:server\" \"npm:type-check:client\"",
+    "type-check:server:watch": "tsc --watch --preserveWatchOutput --pretty --project config/tsconfig.server.dev.json --noEmit",
+    "type-check:client:watch": "tsc --watch --preserveWatchOutput --pretty --project config/tsconfig.client.dev.json --noEmit",
+    "type-check:watch": "concurrently \"npm:type-check:server:watch\" \"npm:type-check:client:watch\"",
+    "build:server:types": "tsc --emitDeclarationOnly --project config/tsconfig.server.json",
+    "build:server:js": "webpack --config config/webpack.server.prod.js",
+    "build:server": "npm run build:server:types && npm run build:server:js",
+    "build:client:types": "tsc --emitDeclarationOnly --project config/tsconfig.client.json",
+    "build:client:js": "webpack --config config/webpack.client.prod.js",
+    "build:client": "npm run build:client:types && npm run build:client:js",
+    "build": "rm -rf dist && npm run build:server && npm run build:client",
+    "dev:server:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput --pretty --project config/tsconfig.server.json",
+    "dev:server:js": "webpack --config config/webpack.server.dev.js",
+    "dev:server": "concurrently \"npm:dev:server:types\" \"npm:dev:server:js\"",
+    "dev:client:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput --pretty --project config/tsconfig.client.json",
+    "dev:client:js": "webpack --config config/webpack.client.dev.js",
+    "dev:client": "concurrently \"npm:dev:client:types\" \"npm:dev:client:js\"",
+    "dev:start": "mkdir -p dev/server && touch dev/server/bundle.js && nodemon dev/server/bundle.js",
+    "dev": "rm -rf dist && concurrently \"npm:dev:server\" \"npm:dev:client\" \"npm:dev:start\"",
+    "start": "node dist/server/bundle.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.gaetanbrochard.dev/gbrochar/expo-web.git"
+  },
+  "author": "gbrochar",
+  "license": "GPLv3",
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-typescript": "^7.12.1",
+    "@babel/runtime-corejs3": "^7.12.5",
+    "@types/express": "^4.17.9",
+    "@types/react": "^16.14.0",
+    "@types/react-dom": "^16.9.9",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
+    "babel-loader": "^8.2.1",
+    "concurrently": "^5.3.0",
+    "core-js": "^3.7.0",
+    "eslint": "^7.13.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-webpack-plugin": "^2.4.0",
+    "nodemon": "^2.0.6",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.1.2",
+    "webpack": "^5.6.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-merge": "^5.4.0",
+    "webpack-node-externals": "^2.5.2"
+  },
+  "dependencies": {
+    "ejs": "^3.1.5",
+    "express": "^4.17.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}

src/client/components/Root.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Root() {
+	return (
+		<div>Hello World !</div>
+	);
+}

src/client/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {hydrate, render} from 'react-dom';
+import Root from './components/Root';
+
+const root = document.getElementById('root');
+let renderMethod;
+if (root && root.innerHTML !== '') {
+	renderMethod = hydrate;
+} else {
+	renderMethod = render;
+}
+
+renderMethod(<Root />, document.getElementById('root'));

src/server/main.ts

@@ -0,0 +1,15 @@
+import express from 'express';
+import path from 'path';
+
+const app = express();
+
+app.set('view engine', 'ejs')
+
+app.use('/static', express.static(path.join(__dirname, '../../public')));
+app.use('/js', express.static(path.join(__dirname, '../../dist/client')));
+
+app.get('/', (_req, res) => {
+	res.render('index');
+})
+
+app.listen(3000);

tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUnusedParameters": true,
+        "noImplicitReturns": true,
+        "esModuleInterop": true,
+        "noUnusedLocals": true,
+        "noImplicitAny": true,
+        "declaration": true,
+        "jsx" : "preserve",
+        "module": "commonjs",
+        "strict": true
+	},
+	"exclude": [
+		"node_modules",
+		"config",
+		"views",
+		"build",
+		"dev",
+		"dist"
+	]
+}

views/index.ejs

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="Description" content="Web version of digital art exhibition">
+		<title>Web-Expo</title>
+
+		<link rel="stylesheet" href="static/css/homepage.css">
+	</head>
+	<body>
+		<div id="root"></div>
+		<script src="js/bundle.js"></script>
+	</body>
+</html>