How to run the website repository locally?
To run the website repository locally, you must have the following requirements installed:
- Nodejs installed in your system https://nodejs.org/en
- Make sure you have Yarn installed https://classic.yarnpkg.com/lang/en/docs/install/
Ordering-UI-release: This repository contains the code for the Ordering 2.0 website, including all components. It can be run locally, allowing for desired modifications. This repository helps us identify the component that we need to add for the desired change on the Ordering 2.0 website.
Ordering-Website-release: This repository contains the frontend code of the Ordering 2.0 website without the components. The components are loaded from the Ordering GitHub repository at compile time. This code is the same as that used in the builder. To make modifications, it is necessary to add the desired component from the other repository.
Below are the steps to make modifications to the Ordering 2.0 website.
Step 1 - Running locally “Ordering-UI-release”
Open the Website 2.0 repository using Visual Studio Code, In this case, the repository is named "Ordering-UI-release”:
- Remove the file yarn.lock
- Change the project path to the following location in the code, and add your project ID:
- template/config.json
- Run the following command in the terminal:
- yarn && yarn run serve
The first load will take a moment; please wait until it completes
https://d.pr/v/EmfW5a ← Video example
Step 2 - Identify the required component
Identify which element you want to make modifications to; in this case, we will make changes to the bar for entering the address.
Install the 'React Developer Tools' extension to identify the component in which you can modify this element in the code: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Use the extension to identify the component name; in the browser, you should utilize the development tools: https://d.pr/v/Z7RAJz
You will identify the parent component and the child components, as shown in the following diagram.
These components will need to be obtained from the component repository.
Once you have identified the necessary component, you should copy this component to your "Ordering-Website-release" repository in src/components.
In this example, the component is “HomeHero”, you should consider that in some cases, the component may require adding additional ones as it might be integrated as part of a set of others, as illustrated in the "React Developer Tools" schema.
Step 3 - Running locally “Ordering-Website-release”
- Remove the file yarn.lock
- Change the project path to the following location in the code, and add your project ID:
- src/config.json
- Run the following command in the terminal:
- yarn && yarn run serve
Step 4 - Adapt the changes to the code.
In the "Ordering-Website-release" repository, there is a section called "pages" (src/pages) responsible for rendering each element of the site. By default, for the "Home" section, the "HomeHero" component is obtained from GitHub. The path should be modified to incorporate the manually added component.
The component import should be modified as shown below.
In this case, the component path has been modified:
Also, if there are errors due to incorrect paths in some imports, you should change the path to 'ordering-ui-external' and from 'ordering-ui-external/theme_five'. In this case, the following changes were made:
Step 5 - Make changes to the code
In this step, you should make any desired changes to the desired component. In this case, the size of the blue button has been increased:
Once the change is made, you can save the modified section. Then, the code will automatically compile (if you are running the code locally) and display the changes in the browser.
Step 6 - Upload files in the Builder on https://my.ordering.co
Once you have made the changes to your component, you need to upload all the modifications to the "Ordering-Website-release" repository on your Ordering 2.0 website at https://my.ordering.co/.
In the "Custom" section, you should add the paths and load the files added to your "Ordering-Website-release" repository. As shown below, all the files have been added:
You need to add the modified code from "src/pages/Home/index.js" in the "Search and Replace" section. After selecting "TRY SEARCH", you can verify that the change is detected, then save:
Step 7- Build your website
- Go to the section called Build
- Following by selecting the option called Build website
- Click on the button that says SYNC STAGING
Ordering always involves thinking about what you need most.
As Always, Happy Ordering.
www.ordering.co