build: Update to node 18 and migrate to SWC

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.12.1]
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/deploy.yml

@@ -20,7 +20,7 @@ jobs:
     - name: setup Node
       uses: actions/setup-node@v3
       with:
-        node-version: '16.x'
+        node-version: '18.12.1'
 
     - run: npm ci
     - run: npm run build

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+18.12.1

.swcrc

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": true
+    }
+  }
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "yaml.schemas": {
+        "https://json.schemastore.org/github-workflow.json": "file:///home/hamza/projects/webpack-typescript-starter/.github/workflows/deploy.yml"
+    }
+}

Dockerfile

@@ -1,6 +1,7 @@
-FROM node:lts AS compile-image
+FROM node:18.12.1 AS build
 
-LABEL name="Webpack starter" \
+
+LABEL name="Webpack typescript starter" \
       description="This image is for webpack typescript starter."
 
 WORKDIR /app
@@ -13,4 +14,4 @@ RUN npm run build
 
 FROM nginx
 COPY nginx.conf /etc/nginx/conf.d/default.conf 
-COPY --from=compile-image /app/dist /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html

README.md

@@ -10,15 +10,15 @@
     <a href="https://app.netlify.com/sites/webpack-typescript-starter/deploys">
         <img src="https://api.netlify.com/api/v1/badges/a3caceb4-756f-42ae-913c-96700a2100a2/deploy-status" alt="Build Status">
     </a>
-
 </p>
 
 Webpack typescript starter with:
 
 - Webpack 5
 - Typescript
-- Scss
-- Ts-jest
+- SCSS
+- SWC (Speedy Web Compiler)
+- SWC/jest
 - Eslint
 
 ## [Demo](https://webpack-typescript-starter.netlify.app/)
@@ -39,6 +39,8 @@ npm install
 npm start
 ```
 
+The application will be available at http://localhost:4200
+
 ### Build your application
 
 ```bash
@@ -64,3 +66,5 @@ Or simply run the example using docker:
 ```bash
 docker-compose up
 ```
+
+The application will be available at http://localhost:4000

docker-compose.yml

@@ -1,7 +1,6 @@
 version: '3.5' 
 services:
-    front-application:
-      container_name: webpack-starter-container 
+    webpack-typescript-starter:
       build: 
         context: .
         dockerfile: Dockerfile

jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  preset: 'ts-jest',
   testEnvironment: 'jsdom',
   roots: ['<rootDir>/src'],
   collectCoverageFrom: ['src/components/**/*.{js,jsx,ts,tsx}'],
@@ -8,4 +7,7 @@ module.exports = {
       '<rootDir>/jest-config/file-mock.js',
     '\\.(css|scss|sass|less)$': 'identity-obj-proxy',
   },
+  transform: {
+    "^.+\\.(t|j)sx?$": ["@swc/jest"],
+  },
 };