Skip to content

Commit

Permalink
Merge pull request #452 from dasuni-30/change-vite-to-cra
Browse files Browse the repository at this point in the history
Change from vite to create react app to fix the code_verfier undefined issue
  • Loading branch information
dasuni-30 authored Apr 29, 2024
2 parents e6311ee + b72e814 commit da0ba7a
Show file tree
Hide file tree
Showing 10 changed files with 136 additions and 28 deletions.
4 changes: 2 additions & 2 deletions petcare-sample/b2c/web-app/petdesk/web/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ Read more about the SDK configurations [here](../../README.md#authprovider).
### Run the Application

```bash
npm install && npm run dev
npm install && npm start
```
The app should open at [`http://localhost:5173`](http://localhost:5173)
The app should open at [`http://localhost:3000`](http://localhost:3000)
13 changes: 13 additions & 0 deletions petcare-sample/b2c/web-app/petdesk/web/react/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"baseUrl": "https://localhost:9443",
"clientID": "<CONFIGURED_SPA_CLIENT_ID>",
"scope": [
"openid",
"profile",
"email"
],
"signInRedirectURL": "http://localhost:3000",
"signOutRedirectURL": "http://localhost:3000",
"resourceServerURL": "http://localhost:9090",
"myAccountAppURL": ""
}
11 changes: 5 additions & 6 deletions petcare-sample/b2c/web-app/petdesk/web/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,13 @@
"license": "Apache-2.0",
"private": false,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"start": "webpack-dev-server --mode development --hot --open",
"prebuild": "yarn install",
"build": "webpack",
"prod": "webpack --mode production"
},
"dependencies": {
"@asgardeo/auth-react": "^2.0.4",
"@asgardeo/auth-react": "^4.0.2",
"@babel/runtime-corejs3": "^7.20.6",
"@headlessui/react": "^1.7.13",
"@mui/icons-material": "^5.11.16",
Expand All @@ -56,7 +57,6 @@
"@babel/preset-typescript": "^7.18.6",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react": "^4.0.3",
"babel-loader": "^9.1.0",
"babel-polyfill": "^6.26.0",
"chalk": "^5.2.0",
Expand All @@ -70,7 +70,6 @@
"style-loader": "^3.3.1",
"typescript": "^4.9.4",
"url-loader": "^4.1.1",
"vite": "^4.4.7",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
Expand Down
4 changes: 2 additions & 2 deletions petcare-sample/b2c/web-app/petdesk/web/react/src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./app.css";
import { ErrorBoundary } from "./error-boundary";
import { HomePage, NotFoundPage } from "./pages";
import { getConfig } from "./util/getConfig";
import { default as authConfig } from "../../../web/react/config.json";

const AppContent: FunctionComponent = (): ReactElement => {
const { error } = useAuthContext();
Expand All @@ -41,7 +41,7 @@ const AppContent: FunctionComponent = (): ReactElement => {
};

const App = () => (
<AuthProvider config={getConfig()}>
<AuthProvider config={authConfig}>
<AppContent />
</AuthProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
*/

import { initInstance } from "../../pages/instance";
import { getConfig } from "../../util/getConfig";
import { default as authConfig } from "../../../config.json";

export const getPetInstance = () => {
let conf = getConfig().resourceServerURL;
let conf = authConfig.resourceServerURL;
return initInstance(conf);
};
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import LogoutIcon from '@mui/icons-material/Logout';
import { BasicUserInfo, useAuthContext } from "@asgardeo/auth-react";
import { getNotification } from "./Notifications/get-notification";
import { getConfig } from "../util/getConfig";
import { default as authConfig } from "../../config.json";

export default function MenuListComposition(props: {
user: BasicUserInfo;
Expand Down Expand Up @@ -67,7 +67,7 @@ export default function MenuListComposition(props: {
};

const gotoMyAccount = () => {
window.open(getConfig().myAccountAppURL, '_blank');
window.open(authConfig.myAccountAppURL, '_blank');
};

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
name="referrer"
content="no-referrer"
/>
<script src="/config.js"></script>

<title>Pet Management App</title>

Expand All @@ -46,7 +45,6 @@
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="module" src="/src/app.tsx"></script>
</body>

</html>
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import PetOverview from "./Pets/petOverview";
import PetCard from "./Pets/PetCard";
import { getPets } from "../components/getPetList/get-pets";
import MenuListComposition from "../components/UserMenu";
import { getConfig } from "../util/getConfig";
import { default as authConfig } from "../../config.json";

interface DerivedState {
authenticateResponse: BasicUserInfo,
Expand Down Expand Up @@ -88,7 +88,6 @@ export const HomePage: FunctionComponent = (): ReactElement => {
setUser(basicUserInfo);
const idToken = await getIDToken();
const decodedIDToken = await getDecodedIDToken();
console.log("decodedIDToken", decodedIDToken);


const derivedState: DerivedState = {
Expand Down Expand Up @@ -127,10 +126,10 @@ export const HomePage: FunctionComponent = (): ReactElement => {
}

useEffect(() => {
if (!isAddPetOpen) {
if (!isAddPetOpen && state.isAuthenticated) {
getPetList();
}
}, [isAddPetOpen, isOverviewOpen, isUpdateViewOpen]);
}, [isAddPetOpen, isOverviewOpen, isUpdateViewOpen, state.isAuthenticated]);


useEffect(() => {
Expand Down Expand Up @@ -166,7 +165,7 @@ export const HomePage: FunctionComponent = (): ReactElement => {
};

// If `clientID` is not defined in `config.json`, show a UI warning.
if (!getConfig().clientID) {
if (!authConfig.clientID) {

return (
<div className="content">
Expand Down
7 changes: 0 additions & 7 deletions petcare-sample/b2c/web-app/petdesk/web/react/vite.config.js

This file was deleted.

106 changes: 106 additions & 0 deletions petcare-sample/b2c/web-app/petdesk/web/react/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/**
* Copyright (c) 2024, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

require("dotenv").config();
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const { findPort } = require("dev-server-ports");

const HOST = process.env.HOST || "localhost";
const DEFAULT_PORT = process.env.PORT || 3000;
const devServerHostCheckDisabled =
process.env.DISABLE_DEV_SERVER_HOST_CHECK === "true";
const https = process.env.HTTPS === "true";

const generatePortInUsePrompt = () => {
return `Be sure to update the following configurations if you proceed with the port change.
1. Update the "PORT" in ".env" file in the app root.
2. Update the signInRedirectURL & signOutRedirectURL in "src/config.json".
3. Go to the Asgardeo console and navigate to the protocol tab of your application:
- Update the Authorized Redirect URL.
- Update the Allowed Origins.
`;
};

module.exports = async () => {
const PORT = await findPort(DEFAULT_PORT, HOST, false, {
extensions: {
BEFORE_getProcessTerminationMessage: () => {
return generatePortInUsePrompt();
},
},
});

return ({
devServer: {
static: path.resolve(__dirname, "dist"),
historyApiFallback: true,
server: https ? "https": "http",
host: HOST,
allowedHosts: devServerHostCheckDisabled ? "all" : undefined,
port: PORT,
},
devtool: "source-map",
entry: [ "./src/app.tsx" ],
mode: "development",
module: {
rules: [
{
test: /\.(tsx|ts|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [ "style-loader", "css-loader" ]
},
{
test: /\.(png|jpg|cur|gif|eot|ttf|woff|woff2)$/,
use: [ "url-loader" ]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.js$/,
enforce: "pre",
use: [ "source-map-loader" ]
}
]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
resolve: {
extensions: [ ".tsx", ".ts", ".js", ".json" ]
}
});
};

0 comments on commit da0ba7a

Please sign in to comment.