UHelp - NextJs Support Ticketing System

Facilitating frontend modifications has become more streamlined. Within the downloaded .zip file from CodeCanyon, locate the NextJs folder containing all the front-end NextJs code. This code is developed using the latest web technologies, specifically NextJs 14.2.4,React 18 and Javascript. Therefore, any custom modifications to the front-end code should adhere to the following process.

To compile the NextJs version, initiate the installation of the required node_modules by executing the command "npm install" or "npm install --force" to install all necessary packages. After the installation is complete, update the "next.config.mjs" destination path with your project path or backend Host path. Once this path is updated in the next.config.mjs file, you can compile the NextJs project using "npm runn dev".

/** @type {import('next').NextConfig} */
let prodUrl = "/nex_fin" // Prod Url where you are running the Backend
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/detail/:path*',        
        destination: 'http://192.168.0.1/projects/nextJs/Uhelp/detail/:path*' // Your backend server URL ( detail is mandatory )
      }
    ];
  },
  reactStrictMode: true,
  trailingSlash: true,
  swcMinify: true,
  //distDir : "../Uhelp/public/client", // Build path According to backend project
  //output: 'export',					  // Used for Build
  //basePath: `${prodUrl}`,		      // Prod Url where you are running the Backend
  //assetPrefix: `${prodUrl}/client`,	  // Prod Url where you are running the Backend
  env: {
    NEXT_PUBLIC_ASSET_PREFIX: `${prodUrl}/client`,		// For assets Access
    NEXT_PUBLIC_PREFIX: `${prodUrl}`,					// For assets Access
  }
};
export default nextConfig;

Note: distDir, output, basePath and assetPrefix should need to be commented to work in local as they are used for basepath which will not work in local.

Access the path "localhost:3000," which is the default serve path. If you are running the NextJs project with a different path, replace 3000 with the appropriate path. Please note that changes, excluding UI modifications, will reflect in the target path specified in the next.config.mjs file.

When making changes to the assets SCSS file, run the "npm run sass" and "npm run updatestyle" commands to compile and convert the SCSS code into CSS code. This step is crucial to ensure that the changes are correctly reflected in the final output.

For a more detailed guide, refer to our comprehensive tutorial available in this video guide.

Following modifications, execute the "npm run build" commands to compile the code into a production-ready state. These commands encompass compilation, optimization, and the generation of output for all front-end code, consolidating the results within the dist/browser folder.

To seamlessly update your production site, replace the existing public/client folder with the contents generated in the dist folder. This meticulous process ensures the seamless integration of changes into your production environment.

Note: distDir, output, basePath and assetPrefix should need to be available when building the project for production use else it wont work as expected.