Frontend development CI flow

[metalalive]

Hi @wingtkw ,
I am trying to build CI (continuous integration) flow for frontend app development for the issue #32,
this would help anyone (potential contributors) build the frontend development environment by themselves without too much hassle.
我正在嘗試為前端應用程式開發建立 CI 流程, 希望這能幫助任何人（潛在的貢獻者）自己建立前端開發環境，而不會遇到太多麻煩。

I have been working on this configuration file , but it failed to build next.js and run the linter.
我一直在編輯這個配置文件，但它無法構建“next.js”並運行linter

For build logs you can see the Actions in this github codebase ,

Can you please take a look at this :

• How to build next.js ? is there any file missing to upload to this codebase ? 如何建構“next.js”？目前的 github codebase 是否缺少任何檔案 ? (之前的code reviewers 似乎沒有注意到這一點)
• How to run eslint with npm or npx ? what is the correct setup for this ? 如何使用“npm”或“npx”運行“eslint”？正確的設定/命令是什麼 ?
• Also , would you consider to write a few simple test cases and run them with some commands ? 您會考慮編寫一些簡單的測試案例並使用一些命令來運行它們嗎 ?
  • like what backend developers did with poetry and pytest in Python
  • this could also help anyone (potential contributors) understand the code works well in some situations, without relying on just launching development server (e.g. npm run dev) 這還可以幫助任何人（潛在的貢獻者）了解程式碼在某些情況下運作良好，而無需僅依賴啟動 development server 然後手動測試

Thanks for reading,
I tried to leave messages to find other contributors (for frontend app) in somewhere else,
however, this github codebase lacks sufficient context, information, or even introduction about what to do, how they can build app,
that is why I start working on this first.
謝謝閱讀，
我嘗試留言以在其他地方找到其他貢獻者（前端應用程式），
然而，這個 github 程式碼庫缺乏足夠的上下文、信息，甚至缺乏關於要做什麼、如何構建應用程式的介紹，
這就是我首先開始研究這個的原因。

btw ,
I try to help out but I don't really dedicate to (or dive deep into) frontend development,
forgive me if these are dumb questions. :)

[metalalive]

So far I got 2 different errors :

• without custom frontend/.babelrc suggested by the StackOverflow thread , the build process was done successfully, but the linter reported error

  Failed to load config "next/babel" to extend from.
  Referenced from: /home/runner/work/Pandemic-Reign-of-Cthulhu/Pandemic-Reign-of-Cthulhu/frontend/.eslintrc.json

• with custom frontend/.babelrc , the build process reported following error, looks like the custom babel file will trigger another conflict

  ./app/layout.tsx:2:1
  Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.

Feedback are welcome, thanks again.

[metalalive]

WIng, I heard that some frontend developers switched to SWC (from Babel) for different reasons (e.g. build time, test time, size of the built files ...etc) , what is your thought about this ?

[wingtkw]

Maybe I needa check on this
As I mostly use babel and not sure about swc

[metalalive]

Update

HI, @wingtkw , I can run the linter and build next.js successfully without babel (see the build log) , but there is only one typescript file found after eslint search,

Here are my steps to make it work.

Currently I modified the following files in the branch experiment/frontend/ci-setup

• New command option in frontend/package.json

{
   "scripts": {
      "lint_exp": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
}

• Remove frontend/.eslintrc.json

  • it contains next/babel , I suspect this is the root cause of the lint error I had

• Add frontend/.eslintrc.js

• Add .github/workflows/frontend_ci.yml

  • see the lint step, instead of babel, I installed other eslint dependencies such as
    • @typescript-eslint/parser
    • @typescript-eslint/eslint-plugin

[metalalive]

@wingtkw if you are struggling to find out the root cause of the problem, or any difference between your development environment and GitHub Action environment ,
you can consider to replace babel with something else (I know you used to work with babel for a long time) ,
it is not necessary to be SWC , or the dependencies I listed above ,
at least it is better to be something less problematic ,
thanks again

[metalalive]

Hi @wingtkw , any progress on this issue ?
or can you let us know where you get stuck at ?

[wingtkw]

I have revised the command for running npm run lint
basically it's next lint --fix,
next has support on eslint so I don't think we need to explicity specify eslint extension

after taking a look on the documentation, I agree that the next/babel may be the root cause of the lint error
I have also revised the followings

• change next as next/core-web-vitals for strict checking
• added lint staged checking from next config
• included following new packages
• • eslint-config-prettier (as recommended by nextjs documentation to enable ESLint and Prettier work together)
• • sharp (for production image optimization, also recommended by nextjs)

I found that upon running npm run lint, seems like it will complain about the pages dir not found (that's deprecated in nextjs 13, and replaced by app dir)
It's is still an open bug issue found
I try to follow the comments that people are suggesting to make it off
and suggest tracking the issue when a proper fix of this is in place
vercel/next.js#47047
also, updated readme.md and fixed the lint issue found (should be one file only)

I am writing the cypress test (e2e) & jest test (unit test) examples
as we do not have much things in frontend repo right now,
do you think it's ok for me to put the test cases in this way

e2e - use /design (design system page as examples), detect wordings and stuffs, can do a screenshot thing as well

• if needed, I can try to set up another game page for demonstrating how to click button and check across page for cypress

jest - check investigator card (e.g. checking wordings)
but as most of them are in image, let me see if I can add the test case for checking src

[wingtkw]

also, I found that in the frontend.yml, there is a stage for installing & running linting
do you think that's better if I included the dependencies in package.json
and only run lint in that stage

[metalalive]

Thanks @wingtkw , appreciate your work on this issue.
Here are my update (see latest build result ) :

• .github/workflows/frontend_ci.yml
  • removed redundant dependency installation steps
• frontend/package.json
  • add environment valuable DEBUG==eslint:cli-engine prior to eslint command, in order to print list of application files found during the syntax check process
• For frontend CI flow, it would be good to use the command eslint rather than next lint for debugging purpose in the future.
  • in .github/workflows/frontend_ci.yml let us keep the command run lint_exp .

---

Reply to your questions

I am writing the cypress test (e2e) & jest test (unit test) examples
as we do not have much things in frontend repo right now,
do you think it's ok for me to put the test cases in this way

If there is not much game-related logic in the current frontend app (e.g. parse data from REST API , render it with visual component ... etc) , it is OK not to add unit test cases (as you described , if there is very little to verify).

demonstrating how to click button and check across page

Currently you can decide whether or not to do such tests by yourself,
if there are more frontend developers getting involved , you can discuss this with them.

also, I found that in the frontend_ci.yml, there is a stage for installing & running linting
do you think that's better if I included the dependencies in package.json
and only run lint in that stage

It looks neat to specify all dependencies to the setting files for development / runtime / testing purpose , such as the fields dependencies and devDependencies in frontend/package.json,
I did not spend time learning npm configuration and my local dev environment is too old to set up npm project ,
so I directly added eslint-related dependencies to the frontend_ci.yml.

[metalalive]

For any code contributor who can work on the test cases in frontend CI flow,
feel free to continue the discussion at this thread, thanks