I’ve been able to pass all the tests for the Expresso project. When I went to try it out in the browser I noticed that the Menus are sorted by name, I checked in the src folder and found where I could modify it to sort by id instead (/src/views/Menu.js lines 60-68). However, in order to update the change, I’ll need to rebuild. It looks like it’s built with React but not Create-React-App and there’s no build script in the package.json. This is not something I’m familiar with. How can I modify the front end?
It’s using the webpack bundler in order to build the project. They provided the webpack.config.js too, but there are a couple things you’ll need to do in order to successfully build.
Here are the steps I took to rebuild the front-end
Install dependencies
The project uses a 3rd party library that has dependencies of its own that will be needed for a full rebuild.
cd src/utils/camelcase-keys
npm install
You can go back to the main project directory now
Edit main project package.json
As you pointed out, there isn’t a build script in the package.json, so we’ll add one.
"build": "webpack"
should be added to the “scripts” section
Rebuild front-end
Now you can rebuild
npm run build
I tried as you suggested. It failed at first with the default “webpack”: “^3.5.5”. It said: “Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema”…
I then tried the version you used in your screenshot, 3.12.0, reinstalled, and it ran OK.
Interesting you mentioned the config file - before I posted this query, I had a quick look on the webpack docs and tried this:
npx webpack --config webpack.config.js
but I kept getting even more troubles saying webpack-cli not installed, even after I installed numerous times.
Anyway, it’s sorted now, so thank you. Here’s the final result I was aiming for, so you can see why I didn’t want it sorted alphabetically:
For anybody else interested in changing this, here’s what I did in /src/views/Landing.js:
componentDidMount() {
Expresso.getMenus().then((menus) => {
if (menus.length) {
const sortedMenus = this.sortMenus(menus);
this.setState({ menus: sortedMenus });
}
});
And the sorting method:
sortMenus(menus) {
return menus.sort((menu1, menu2) => {
if (menu1.id < menu2.id) {
return -1;
} else {
return 1;
}
});
}
(I can’t edit the first post which mentioned the wrong file)