Proper setup for development and deployment ensures a smooth workflow and reliable application performance. This article outlines the necessary steps for both and is organizes into the following sub-topics:
- Prerequisites for e-Business React development
- Getting Started
- Making your Project Production-Ready
- Deploying Project to Production Environment
Prerequisites for e-Business React development
To start developing e-Business React on your machine, you must first ensure the following prerequisites are met:
- Node v.18.x.x or greater must be installed on your machine.
- A source-code editor must be installed on your machine. We recommend using Visual Studio Code.
- Add the following extensions to your Visual Studio Code instance:
- ESLint v.3.x.x
- Prettier - Code Formatter v.10.x.x
Getting Started
- Download the Aptify e-Business Setup ZIP file and extract its contents.
- The "eBiz UI React Source Code" directory contains the source code for the eBusiness React application.
- Extract the contents of the ZIP file, "ebizReact".
- Open this project in a source-code editor. We recommend using Visual Studio Code.
- Open the terminal and run the following command to install all the dependencies for the project, listed in the "package.json" file,
npm install - Update the ServicePath property in the "/public/ebConfig.json" file with your environment's SOA URL, where the services are hosted.
- The "VITE_BASE_URL" variable is present in the ".env.development" file, in the root directory. By default, we have set this as empty for the development environment, but you can change it as per your requirement.
VITE_BASE_URL='' - The default server port for deploying the ebizReact application on the development environment is set to "3000". This causes your local e-Business website to be hosted on "http://localhost:3000/".
However, this can be changed by configuring the "server" property in the "vite.config.js" file, found in the root directory.
server: {port: 3000} - To start the development server and launch your website, run the following command in the terminal,
npm run dev
Making your Project Production-Ready
After development, react code needs to be built. This process converts the code into an executable form that can run in a browser. The resulting build directory contains a minified and bundled version of the code.
We have used Vite as the build tool for our application. Building the code using Vite creates a "dist" folder. The contents of this folder are deployed on IIS.
Once you have developed and added custom code to the stock code, the ebizReact project needs to be re-built and updated on the IIS where the e-Business setup has installed the stock e-Business React application.
Follow the steps given below:
- In Visual Studio Code, open the terminal. Make sure it is pointing to your ebizReact project directory.
- Run the below command to build your project. This should create a "dist" folder in the project directory.
npm run build - Run the below command to preview the freshly built production build of your project.
npm run preview
The production build for preview will be hosted on the local development server. The preview can be accessed via a URL similar to "http://localhost:4173/eBizUI/".
As per Aptify e-Business standards, "eBizUI" has to be appended to site path of the e-Business React site, just like "SOA" is appended for e-Business services and "UI" for e-Business Knockout site. The term "eBizUI" is automatically appended because of the "VITE_BASE_URL" property that is set in the ".env.production" file. Please make sure to keep this unchanged.
Previewing your production build before deployment is advisable to prevent potential disruptions in the production environment.
Deploying Project to Production Environment
Following the steps outlined in the previous section should result in a production-ready build of your ebizReact project.
Follow the below given steps for deploying it to the production environment:
- Navigate to the "dist" folder, created as a result of building the project.
- Copy the contents in this folder.
- On the production environment, navigate to the directory of the "eBizUI" website from IIS.
- Take a backup of the contents present in this directory.
- Replace the contents here with the copied contents from Step 2.
- Verify the configurations in the ebConfig.json file, most specifically, the ServicePath configuration. Make sure its value is correctly set to the e-Business SOA URL.
- Reset IIS.
- Verify that your new updated site is up and running.
Related Topics
Setting Up the Code for Development and Deployment
Configuring Routing to existing or new page
Configuring ESlint, Husky and Prettier
Comments
Please sign in to leave a comment.