Application Refactoring with Vite and updated libraries

.devcontainer/Dockerfile

@@ -0,0 +1,4 @@
+FROM node:20-alpine3.19
+RUN apk update && apk add git openssh go go-doc
+RUN mkdir -p $(go env GOROOT)/misc/wasm
+RUN cp  /usr/share/doc/go/misc/wasm/wasm_exec.js  $(go env GOROOT)/misc/wasm/wasm_exec.js

.devcontainer/devcontainer.json

@@ -0,0 +1,19 @@
+{
+	"name": "PublicCodeEditor",
+	"dockerFile": "Dockerfile",
+	"runArgs": [
+		"--name",
+		"PublicCodeEditor_devcontainer"
+	],
+	"postCreateCommand": "sh .devcontainer/postCreateCommand.sh",
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"dbaeumer.vscode-eslint",
+				"github.vscode-pull-request-github",
+				"waderyan.gitblame"
+			]
+		}
+	},
+	"remoteUser": "root"
+}

.devcontainer/postCreateCommand.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+echo PostCreateCommand
+node -v
+go s
+
+echo "Install Global Deps"
+npm i -g http-server
+
+echo "Install Deps"
+npm i

.env-example

@@ -4,4 +4,11 @@
 # Valid identifiers: "all", "none" or "italy"
 #
 # (default: "none")
-DEFAULT_COUNTRY_SECTIONS=none
+VITE_DEFAULT_COUNTRY_SECTIONS=none
+
+VITE_REPOSITORY=
+VITE_ELASTIC_URL=
+VITE_VALIDATOR_URL=
+VITE_VALIDATOR_REMOTE_URL=
+VITE_DEFAULT_COUNTRY=
+VITE_FALLBACK_LANGUAGE=

.gitignore

@@ -1,21 +1,31 @@
-.DS_Store
+# Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-node_modules
+pnpm-debug.log*
+lerna-debug.log*
 
-build
+node_modules
 dist
+dist-ssr
+*.local
 
-.env
-.serverless
-.eslintcache
-
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-TODO
-.vscode
-.history
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
+#src/generated
+*.tsbuildinfo
+# Local Netlify folder
+.netlify
 
-/src/generated

Dockerfile

@@ -2,18 +2,24 @@
 FROM node:20-alpine3.19 as build-stage
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm install
+RUN rm -fr node_modules
+RUN mkdir node_modules
+RUN rm -fr dist
 
+COPY package*.json ./
 COPY . .
 
 RUN apk update && apk add go go-doc
 RUN mkdir -p $(go env GOROOT)/misc/wasm
 RUN cp  /usr/share/doc/go/misc/wasm/wasm_exec.js  $(go env GOROOT)/misc/wasm/wasm_exec.js
 
-RUN npm run build
+# RUN npm install
+RUN yarn config set cache-folder .yarn
+RUN yarn install
+RUN yarn build
+# RUN npm run build
 EXPOSE 8080
-CMD ["npm", "run",  "dev"]
+CMD ["yarn",  "dev"]
 
 #FROM nginx:alpine
 #WORKDIR /app

README.md

@@ -47,6 +47,35 @@ npm run dev
 
 This will expose a webserver listening at [`http://localhost:8080`](http://localhost:8080).
 
+#### Devcontainer
+
+In order to develop in a container, you have to match the following criteria:
+
+- VSCode installed
+- Docker installed and running
+- VSCode Devcontainer extension installed ([doc](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers))
+
+You can clone the repo, run VSCode in that folder and run in a container.
+
+Otherwise, you could simply click on following button.
+
+[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/italia/publiccode-editor)
+
+This repo will be cloned in a Container Volume.
+
+For more details, check Devcontainer documentation out at the following links
+
+- [Specs](https://containers.dev/)
+- [VSCode Devcontainer](https://code.visualstudio.com/docs/devcontainers/containers)
+
+Every configuration process, such as dependency installation or wasm configuration, is handled by Devcontainer.
+
+In order to run the development server, you should run:
+
+```console
+npm run dev
+```
+
 #### Static deploy
 
 The editor is fully static and can be build with:

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="wasm_exec.js"></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Public Code Editor</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

netlify.toml

@@ -0,0 +1,21 @@
+# example netlify.toml
+[build]
+  command = "npm run build"
+  functions = "netlify/functions"
+  publish = "dist"
+
+  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
+  ## Not needed for static site generators.
+  #[[redirects]]
+  #  from = "/*"
+  #  to = "/index.html"
+  #  status = 200
+
+  ## (optional) Settings for Netlify Dev
+  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
+  #[dev]
+  #  command = "yarn start" # Command to start your dev server
+  #  port = 3000 # Port that the dev server will be listening on
+  #  publish = "dist" # Folder with the static content for _redirect file
+
+  ## more info on configuring this file: https://ntl.fyi/file-based-build-config