Hi,

For ssl please try in “start” script

"start": "cross-env NODE_ENV=development HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem node server",

This template uses express js for server, if the method above doesn’t works, please try by add the ssl config with express server or webpacke

Express:

- File: server/index.js or middlewares/addDevMiddlewares.js

- Ref: https://adamtheautomator.com/https-nodejs/

Webpack

- File: internals/webpack/webpack.dev.babel.js

- Ref https://gist.github.com/Grawl/bd0096b49276934c807b4a74088b081c

Regards.

Please try to remove all about the react-calendar and unsupported packages. Sometimes not all plugins works with next.js together.

I tried this method too but then it showed same thing with react-clock and so on..

When I created Luxiren, I copied one by one the components and the plugins, not all at once. It should make debuging and error tracing easier. Or you can keep the Dandelion default structure without next.js, because the admin dashboard is more suitable with SPA structure rather than SSR.

Here’s the reference for PWA https://blog.logrocket.com/building-pwa-react/

And here’s for Service Worker config in Dandelion https://ilhammeidi.github.io/dandelion-docs/#offline

Hi, you can put the reducer modules in app/redux/configureStore.js in whitelist like this whitelist: ['module1', 'module2'] And only the registered reducers like in app/redux/reducers.js can be whitelisted.

To run a React.js application with HTTPS in local development, you have a couple of options. One common approach is to use a tool like “mkcert” to generate local SSL certificates, and then configure your development server to use these certificates for HTTPS. Another option is to use a tool like “ngrok” to create a secure tunnel to your local development server.

Here’s the reference to run with https in local:

- https://flaviocopes.com/react-how-to-configure-https-localhost/

- https://create-react-app.dev/docs/using-https-in-development/

- https://www.mariokandut.com/how-to-setup-https-ssl-in-localhost-react/

In app/components/LandingPage/SideNav.js remove !open ? classes.drawerPaperClose : ''

<Drawer
      variant="permanent" 
      classes={{
        paper: cx(classes.drawer, classes.drawerPaper),
}}

baik mas, sebelumnya saya sudah mencoba saran dari mas, dan setelah saya telusuri kembali dari template dandelion pro itu sendiri juga mengalami bug yang sama seperti yang saya alami yaitu setelah saya berhasil menambah item lalu klik edit, data dalam formnya kosong/data tersebut tidak ter-load. Mungkin boleh di cek kembali mas, terima kasih.

Ok nanti saya cek, thank you.

Ka coba untuk yg action editnya di reducer diganti jadi ini

case `${branch}/${EDIT_ROW_FORM}`: {
      editingIndex = draft.dataTable.findIndex((obj) => obj.id === action.item.id);
      draft.formValues = action.item;
      draft.editingId = action.item.id;
      draft.showFrm = true;
      break;
    }

sama di initialState ganti formValues nya jadi null

const initialState = {
  dataTable: [],
  dataInit: [
    {
      id: '0',
      text: '',
      email: '',
      radio: '',
      selection: '',
      onof: false,
      checkbox: false,
      textarea: '',
      edited: true,
    }
  ],
  formValues: null, // yg ini
  editingId: '',
  showFrm: false,
  notifMsg: '',
};

Hi, Sometimes the error line number not too far from it should be. The issues with line numbers can be resolved by restart the server.

For editing, how to load the row data into form

To close form

<CrudTableForm openForm={false} />

For editing in reducers: crudTbFrmReducer.js load data

case `${branch}/${EDIT_ROW_FORM}`: {
      const index = draft.dataTable.findIndex(item => item.id === action.item.id);
      if (index !== -1) {
        editingIndex = state.dataTable.indexOf(action.item);
        draft.formValues = action.item;
        draft.editingId = action.item.id;
        draft.showFrm = true;
      }
      break;
    }

components: EditableCellFrmDemo.js

<CrudTableForm editRow={(payload) => editRow(editAction(payload, branch))} />

In configureStore.js add ‘login’ reducer in whitelist

const persistConfig = { key: ‘dandelion’, storage, whitelist: [‘ui’, ‘login’] };

- Here’s the codemod for MUI 5 https://mui.com/material-ui/migration/migration-v4/#run-codemods

—

- Codemod for tss styling https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react

—

- Basic cofiguration for react 18 and MUI-theme (same for both dandelion-pro and starter) https://github.com/ilhammeidi/dandelion-starter/commit/898a032b576c2dbe537c0c45e2e24eadc9cae911#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

—

- webpack config for Node 18 https://github.com/ilhammeidi/dandelion-starter/commit/70f98250a672fcda53a4e35ff2831b432a372d74

Sorry wrong link from prev message

- Here’s the codemod for MUI 5 https://mui.com/material-ui/migration/migration-v4/#run-codemods

—

- Codemod for tss styling https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react

—

- Basic cofiguration for react 18 and MUI-theme (same for both dandelion-pro and starter) https://github.com/ilhammeidi/dandelion-starter/commit/898a032b576c2dbe537c0c45e2e24eadc9cae911#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

—

- webpack config for Node 18 https://github.com/ilhammeidi/dandelion-starter/commit/70f98250a672fcda53a4e35ff2831b432a372d74

Hi, it’s maybe a mistake. This is Dandelion Pro react templaten and released in 2018. I think thats another dandelion template.

Branch reducer use for create multiple reducer with same components, so the actions will like product1/fetch_data and product2/fetch_data. So please make sure to call the correct actions.

please share a sample saga code to connect with your crudTbFrmDemo reducer for calling API

I only know a little bit about saga. More less like this:

import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchAllDataSuccess, fetchAllDataError } from '../actions/crudTbFrmActions';
import { FETCH_DATA } from '../constants/crudTbFrmConstants';
import { api } from 'yourApiPath';

function* fetchAllDataTable1() {
  try {
    const response = yield call(api.fetchAllData);
    yield put(fetchAllDataSuccess(response.data, 'branchTable1'));
  } catch (error) {
    yield put(fetchAllDataError(error.message, 'branchTable1'));
  }
}

function* fetchAllDataTable2() {
  try {
    const response = yield call(api.fetchAllData);
    yield put(fetchAllDataSuccess(response.data, 'branchTable2'));
  } catch (error) {
    yield put(fetchAllDataError(error.message, 'branchTable2'));
  }
}

function* allDataSaga() {
  yield takeEvery(FETCH_DATA, fetchAllDataTable1);
  yield takeEvery(FETCH_DATA, fetchAllDataTable2);
}

export default allDataSaga;

Hi,

For mui5 you can check this https://mui.com/material-ui/react-table/#custom-pagination-options

For mui4 https://v4.mui.com/components/tables/#custom-pagination-options

Hi,

Yes it uses webpack v5. I’ve update it yesterday by replaced happypack with babel loader. Here’s the file diff https://github.com/ilhammeidi/dandelion-starter/commit/70f98250a672fcda53a4e35ff2831b432a372d74

Regards

I will update on end of this month

Hi,

You can use starter-project in starter-project/ folder.

Regards.

Please check in the package.json then changed start and build scripts in package.json

And add NODE_OPTIONS=--openssl-legacy-provider

"start": "cross-env NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider node server",

And add to build script as well.

Here’s the docs for troubleshooting related node 18 issue and installation for older version of packages https://ilhammeidi.github.io/dandelion-docs/#shoot

Regards.

Please try to disable the eslint, you can in the docs

Hi,

Here’s the template support detail https://themeforest.net/page/item_support_policy

As support terms above, for hosting and server are excluded from the service

Hosting, server environment, or software
Authors are not required to support issues about your web hosting or server environment, or issues with the software you’ve got installed on your machine to use the item. Please check your ISP/web hosting provider or other software documentation that you’re trying to use to help solve your issues.

But I open for discuss and consult about your deployment without extending the support. I also replied you question before.

Regards.