ApsimX Variable

ApsimX Variable is an application which can be used to create a NextGen Variable in JSON file format. The user can create a JSON file by parsing their own variables or using a template which provide the basic variable to effectively create a NextGen Variable file. Besides that they can also view their variable in their file.

How to run ApsimX Variable Application

npm i
npm run dev

How to deploy Github Pages

Push code to master branch

Important Settings

To deploy ApsimX Variable to Github pages, there are some required configurations

1. package.json

   • homepage - to set up the url on remote Github Pages

2. next.config.mjs

   • distDir - to tell NextJS where it should create the production file to.
   • assetPrefix - to tell NextJS to add this prefix to every assets path. Github Pages requires this setting to map the asset to the application

3. babel-config.js

   • BACKEND_URL - to change the domain of routing inside the components. Default value: /Apsim.Variables\

4. babelrc.js to transform the env in babel-config.js file to remote env without creating the .env file

5. github-pages.yml github action which use to create static files to gh-pages branch. Then Github will deploy application to Github pages from gh-pages

NOTE

• Step 3 and 4 can be ignore BACKEND_URL if we set up the configuration on Github repository, however in NextJS, the env have to have NEXT_ as variable config.

Informations

• Github settings for Github Pages
• Basic Github Pages set up for React Application
• Github pages settings for NextJS Application
• Github action setting

---

Project structure

• build - store production file which are gerenated by next build. NextJS will use to serve the application

• out - store production static file which are generated next export. It will be used to serve as github pages

• public - contain the static file such as image, template file. NextJS will store it as assets at build time

• src - contain all the codes of this application

  • pages - all the pages of the application will be located here. File name will be used as application route path