Merge pull request #161 from Phanindra-tw/master

Add Webpack & babel and create a HomePage Component

.babelrc

@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}

.github/workflows/build_publish.yaml

@@ -26,9 +26,25 @@ jobs:
  - name: Build the app
  run: yarn build-prod
 
- - name: Zip the build
- run: zip -r person-management-app.zip build
+ - id: versionCheck
+ uses: EndBug/version-check@v2
+ with:
+ file-url: https://unpkg.com/person-management-app@latest/package.json
+ static-checking: localIsNew
+
+ - name: Version guard
+ if: steps.versionCheck.outputs.changed == 'false'
+ uses: actions/github-script@v3
+ with:
+ script: |
+ core.setFailed('No version change detected. You should run `yarn bump:<patch|minor|major>` to bump the version')
 
+ - name: Publish
+ env:
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+ run: |
+ npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+ yarn publish --new-version ${{ steps.versionCheck.outputs.version }}
  - id: versionCheck
  uses: EndBug/version-check@v2
  with:

.gitignore

@@ -6,14 +6,15 @@
 
 # production
 /build
-
+/dist
 # misc
 .DS_Store
 -tmp.js
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -1,8 +1,9 @@
 {
  "name": "person-management-app",
  "version": "0.1.0",
- "private": true,
- "homepage": "./",
+ "author": "[email protected]",
+ "description": "Person Management App",
+ "main": "dist/index.js",
  "dependencies": {
  "enzyme": "^3.3.0",
  "enzyme-adapter-react-16": "^1.1.1",
@@ -26,8 +27,8 @@
  "scripts": {
  "precommit": "lint-staged",
  "start": "react-scripts start",
- "build": "react-scripts build",
- "build-prod": "react-scripts build && node modify-build-index.js",
+ "build": "webpack --mode development",
+ "build-prod": "webpack --mode production",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "bump:patch": "yarn version --no-git-tag-version --patch",
@@ -40,5 +41,24 @@
  "**/**/set-value": "^2.0.1",
  "**/**/lodash": "^4.17.12",
  "**/**/mixin-deep": "^1.3.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.24.4",
+ "@babel/preset-env": "^7.24.4",
+ "@babel/preset-react": "^7.24.1",
+ "babel-loader": "^9.1.3",
+ "css-loader": "5.2.6",
+ "file-loader": "^6.2.0",
+ "html-webpack-plugin": "^5.6.0",
+ "style-loader": "1.3.0",
+ "svg-inline-loader": "^0.8.2",
+ "webpack": "^5.91.0",
+ "webpack-cli": "^5.1.4"
+ },
+ "exports": {
+ ".": {
+ "import": "./dist/index.js",
+ "require": "./dist/index.js"
+ }
  }
 }

src/App.js

@@ -1,22 +1,10 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import CreatePerson from './containers/CreatePerson';
-import PersonDashboard from './containers/PersonDashboard';
-import './index.css';
-import EditPerson from './containers/EditPerson';
+import './containers/HomePage.css';
+import HomePage from './containers/HomePage';
 
 class App extends Component {
  render() {
- return (
- <BrowserRouter basename="/person-management">
- <Switch>
- <Route path="/new" exact component={CreatePerson} />
- <Route path="/search" exact component={PersonDashboard} />
- <Route path="/edit/:uuid" exact component={EditPerson} />
- <Route path="/" component={PersonDashboard} />
- </Switch>
- </BrowserRouter>
- );
+ return <HomePage />;
  }
 }
 

src/index.css → src/containers/HomePage.css

@@ -93,11 +93,11 @@ input[type='checkbox'] + label span {
  margin: 0 10px;
  width: var(--height);
  height: var(--height);
- background: url('../src/assets/checkbox_unchecked.svg') 0px center no-repeat;
+ background: url('../assets/checkbox_unchecked.svg') 0px center no-repeat;
 }
 
 input[type='checkbox']:checked + label span {
- background: url('../src/assets/checkbox_checked.svg') 0px center no-repeat;
+ background: url('../assets/checkbox_checked.svg') 0px center no-repeat;
 }
 
 input[type='checkbox']:disabled + label span {

src/containers/HomePage.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import CreatePerson from './CreatePerson';
+import PersonDashboard from './PersonDashboard';
+import './HomePage.css';
+import EditPerson from './EditPerson';
+
+class App extends Component {
+ render() {
+ return (
+ <BrowserRouter basename="/person-management">
+ <Switch>
+ <Route path="/new" exact component={CreatePerson} />
+ <Route path="/search" exact component={PersonDashboard} />
+ <Route path="/edit/:uuid" exact component={EditPerson} />
+ <Route path="/" component={PersonDashboard} />
+ </Switch>
+ </BrowserRouter>
+ );
+ }
+}
+
+export default App;

src/index.js

@@ -1,12 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-
-ReactDOM.render(
- <App />,
-
- document.getElementById('root')
-);
-registerServiceWorker();
+export { default as HomePage } from './containers/HomePage';

webpack.config.js

@@ -0,0 +1,57 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+ entry: {
+ index: './src/index.js'
+ }, // Entry point of your application
+ output: {
+ path: path.resolve(__dirname, 'dist'), // Output directory
+ library: "PersonManagementApp",
+ libraryTarget: "umd",
+ umdNamedDefine: true,
+ clean: true,
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader' // Use Babel for JavaScript and JSX files
+ },
+ resolve: {
+ fullySpecified: false,
+ },
+ },
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader'] // Use style-loader and css-loader for CSS files
+ },
+ {
+ test: /\.svg$/,
+ use: ['svg-inline-loader'] // Use svg-inline-loader for SVG files
+ },
+ {
+ test: /\.(png|jpg|gif)$/,
+ use: [
+ {
+ loader: 'file-loader', // Use file-loader for other file types like images
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'images/'
+ }
+ }
+ ]
+ }
+ ]
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: './public/index.html' // HTML template
+ })
+ ],
+ resolve: {
+ extensions: ['.ts', '.js'],
+ }
+};