Expresso Project - Modify Front End?

https://www.codecademy.com/paths/web-development/tracks/building-a-persistent-api/modules/persistent-api-cumulative-projects/informationals/cumulative-project-expresso

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

image

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)