Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(agora): create the project agora-app-tailwind (ARCH-298) #2865

Merged
merged 4 commits into from
Oct 2, 2024

Conversation

tschaffter
Copy link
Member

@tschaffter tschaffter commented Sep 30, 2024

Contributes to https://sagebionetworks.jira.com/browse/ARCH-298

Changelog

  • Create the project agora-app-tailwind with esbuild and Tailwind enabled
  • Update the config of Stylelint to ignore a couple of errors in the new project
  • Update the command workspace-kill-port <port> to effectively kill the Angular app started with serve

Important

I wanted this PR to supporting the linting with files with Tailwind ESLint plugin. Ideally, the configuration would be applied in the root ESLint config file. However, we may want to only lint specific files and projects that we know use Tailwind because there are many JS, TS and HTML files that do not include any Tailwind class name, which triggers this error: tailwindcss/no-custom-classname. Configuring ESLint to enforce Tailwind rules will be handled in a separate PR.

Initially included but then removed:

  • Update the ESLint config of the new project to ignore issues related to Tailwind

Notes

Stylelint

It looks like the VS Code extension for Stylelint does not automatically take into account changes made to the Stylelint config file (stylelint.config.mjs). One solution that works is to restart VS Code. Another option may be to disable and re-enable the extension (not tested).

image

Angular apps built with esbuild and started with nx serve may still be running after Ctrl + C

This behavior was previously observed with sandbox-angular-app. This issue does not affect apps built with Webpack.

There is an issue with the command nx serve agora-app-tailwind where stopping the command with Ctrl + C won't stop the process. Yet the app will no longer be available on localhost:4200. The process that is still running can be seen in the list of ports forwarded in VS Code or with the command:

$ lsof -i :4200
COMMAND     PID   USER   FD   TYPE   DEVICE SIZE/OFF NODE NAME
node        503 vscode   53u  IPv4 40411921      0t0  TCP localhost:50090->localhost:4200 (FIN_WAIT2)
node    1954574 vscode   43u  IPv4 40406557      0t0  TCP localhost:4200 (LISTEN)

As result, trying to serve the app again will lead to the issue shown below:

$ nx serve agora-app-tailwind

> nx run agora-app-tailwind:serve:development

 Port 4200 is already in use.
Would you like to use a different port? (Y/n)

Observations:

  • The first process, "localhost:50090->localhost:4200 (FIN_WAIT2)", appears when I navigate to the page in a browser.
    • This process is not listed when I serve the app and don't visualize it in the browser.
    • This process does not seem responsible for the second process not existing as the issue happens whether the first process is there or not.
  • After exiting with Ctrl + C, it can take between 0 seconds and 5 minutes for the process "localhost:4200 (LISTEN)" to shutdown.
  • The second process can be killed with kill -9 <pid> but not with kill <pid> as done by workspace-kill-port <port>. Hence, this PR update the command to run kill -9 <pid>.

Warning

Changes made to dev-env.sh, where the command workspace-kill-port is defined, require to source this Bash file again. This can be achieved with the command . ./dev-env.sh or simply opening a new terminal that automatically source this file.

Preview

Create the app

nx g @nx/angular:application agora-app-tailwind \
  --directory apps/agora/app-tailwind \
  --bundler esbuild \
  --addTailwind \
  --e2eTestRunner none \
  --ssr \
  --projectNameAndRootFormat as-provided \
  --dry-run

Serve the app

$ nx serve agora-app-tailwind

...
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
Re-optimizing dependencies because lockfile has changed
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
Re-optimizing dependencies because lockfile has changed

image

@tschaffter tschaffter marked this pull request as ready for review October 1, 2024 00:01
@tschaffter tschaffter requested a review from a team as a code owner October 1, 2024 00:01
@tschaffter
Copy link
Member Author

Errors when importing all the app routes defined in agora-app

This is the error I believe I encountered with trying esbuild with OC.

The good news is that it looks like it's the same error but multiple occurrences.

No output file changes.

Application bundle generation complete. [0.276 seconds]

Application bundle generation failed. [12.339 seconds]

✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import 'libs/agora/styles/src/lib/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/home/src/lib/home.component.scss 1:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
3 │ @import 'libs/agora/styles/src/lib/constants';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/ui/src/lib/components/header/header.component.scss 3:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
3 │ @import 'libs/agora/styles/src/lib/constants';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/ui/src/lib/components/footer/footer.component.scss 3:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import 'libs/agora/styles/src/lib/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/ui/src/lib/components/loading-icon/loading-icon.component.scss 1:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import 'libs/agora/styles/src/lib/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/wiki/src/lib/wiki.component.scss 1:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import 'libs/agora/styles/src/lib/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/news/src/lib/news.component.scss 1:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @use 'libs/agora/styles/src/lib/constants';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/not-found/src/lib/not-found.component.scss 1:1  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import 'libs/agora/styles/src/lib/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/teams/src/lib/team-member-list/team-member-list.component.scss 1:9  root stylesheet [plugin angular-sass]


✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import 'libs/agora/styles/src/lib/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/agora/teams/src/lib/team-list/team-list.component.scss 1:9  root stylesheet [plugin angular-sass]



Comment on lines 57 to +60
echo "There are no processes listening to the port $port."
else
echo "Killing the processes listening to the port $port."
kill $pids
kill -9 $pids
Copy link
Contributor

@sagely1 sagely1 Oct 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a suggestion, we could try killing normally and then force killing if the port is still in use.

function workspace-kill-port {
  local port="$1"
  
  # Check if the port exists
  if ! lsof -i :$port > /dev/null; then
    echo "Port $port is not open."
    return
  fi
  
  # Get PIDs of processes listening on the port
  local pids=$(lsof -t -i:$port)
  
  if [ -z "$pids" ]; then
    echo "No processes found listening on port $port."
    return
  fi
  
  echo "Attempting to kill processes listening on port $port..."
  
  # First, try a regular kill
  kill $pids
  
  # If the above fails, use kill -9
  if ! kill -0 $pids > /dev/null 2>&1; then
    echo "Failed to kill processes. Using SIGKILL"
    kill -9 $pids
  fi
  
  # Verify if the processes were killed successfully
  if ! ps -p $pids > /dev/null; then
    echo "Processes listening on port $port have been successfully terminated."
  else
    echo "Warning: Processes listening on port $port were not terminated successfully."
  fi
}

Copy link
Contributor

@sagely1 sagely1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a suggestion but LGTM!

@tschaffter tschaffter merged commit fbfb63a into Sage-Bionetworks:main Oct 2, 2024
10 of 11 checks passed
@tschaffter tschaffter deleted the agora/app-tailwind branch October 2, 2024 03:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants