search

lidaof / eg-react

WashU Epigenome Browser
https://epigenomegateway.wustl.edu
Other
66 stars 29 forks source link

Error: Installation on windows #269

Closed KHBHH closed 1 year ago

KHBHH commented 2 years ago

Hi,

I am trying to install washu app on my local PC using Windows 11. I npm version 8.9.0 and node version 18.2.0.

But I am having trouble when I do 'npm install'

You can see the last screenshotted error in below link:

image image

I would appreciate some guidance and thanks for your help!

lidaof commented 2 years ago

Hi @KHBHH, it looks like the visual studio installation is required..last month I started with a fresh windows 11 and it worked and I put what I did here: https://eg.readthedocs.io/en/latest/installation.html#setup-on-windows, maybe you can take a look and give it a try? Thanks!

KHBHH commented 2 years ago

Hi @lidaof , thank you for getting back to me so quickly.

I reinstalled nodejs, and the above error was disappeared. Then I was not able to connect to the local host at all, I changed the start in package.json from start": "react-app-rewired start" TO "start": "react-scripts --openssl-legacy-provider start". After this process, it was able to connect but is throwing an error as described below...

Right now, when I run npm install and it tries to connect to the local host, the below error appears. What do you think this can be the result of?

image

image

lidaof commented 2 years ago

Hi @KHBHH so far we only have tested on react-app-rewired, i am not sure if react-scripts would work or not. Would you delete your current app code and re-pull from github do npm install and npm start?

KHBHH commented 2 years ago

Hi @lidaof, I reinstalled the whole code. I had to install new version of jest package (went to node_nodules, deleted jest packages) and ran npm i jest@24.9.0, after that, I was still having error when doing npm start, I changed the start in package.json from "start": "react-app-rewired start" to "start": "react-app-rewired --openssl-legacy-provider start", and now I can run it locally on my PC. Just wanted to share this information, as I think the new version of Nodejs was causing some trouble to connect to the localhost.

Thank you!

lidaof commented 2 years ago

Hi @KHBHH Glad you figured it out, that's very good to know and thanks for sharing!

KHBHH commented 2 years ago

Hi @lidaof, yes, thank you!

I just had another question, I am thinking to host this app on AWS, do you think I would need to create a docker for this? I am just wondering about the process.. And I believe WashU is compatible with AWS, right?

lidaof commented 2 years ago

Hi @KHBHH not sure if you know but https://epigenomegateway.org/browser/ is one of our mirror site running on AWS, we used S3 static web hosting, so you only need put everything under the build folder (after npm run build) in S3 for static hosting

lidaof commented 2 years ago

for track file hosting, you would need enable CORS for your s3 bucket, you can check more information from https://eg.readthedocs.io/en/latest/tracks.html#enable-cors-on-amazon-s3-bucket

KHBHH commented 2 years ago

Hi @lidaof , great to know about S3. How can I upload the app on S3? just upload the whole folder of the app (eg-react-master)? I would appreciate if you could guide me through the process as I am new to AWS. Thanks!

lidaof commented 2 years ago

Hi @KHBHH sure, there are lots of tutorial online, you can simply following aws's documentation: https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html, feel free to ask me any question you may have.

KHBHH commented 2 years ago

Hi @lidaof, thank you for your support. I would also appreciate your advice about the following: As I would like washu to run on my AWS (my jobsite's):

lidaof commented 2 years ago

Hi @KHBHH you are welcome! I guess all combinations should work. performance-wise I think running a static website in S3 with files after npm run build should be best. running the local version is easier for regular custom updates. you are ok to run the version with changes you made, just beware that if you pull a future version you might need to make similar changes again. In that case, you can make your own branch and merge future updates from the master branch.

KHBHH commented 2 years ago

Hi @lidaof,

I uploaded the frontend code to my s3 bucket on AWS, and trying to enable static web hosting. Which is in the index file that I should use? Should be the one in the /frontend/public/index.html , right? When I click on this file, nothing shows up...

Also, is it enough to have only the public folder (from the frontend folder) in my S3 bucket to run the app on my aws instance? Or I should have the whole eg-react-master folder on S3?

I would appreciate your guidance, thanks!

lidaof commented 2 years ago

Hi @KHBHH i assume you can run the local dev server successfully with npm start? then you need run npm run build, this will generate a build folder (if it doesn't exist) then you can upload all file under build folder to s3 for static website hosting, use index.html for both index.html and error.html. and that's enough for hosting a browser mirror site.

let me know you encounter any issue.

KHBHH commented 2 years ago

Hi @lidaof, thank you for getting back to me.

So I did run npm build, and it created a folder (build) inside the frontend folder. I uploaded the contents of the build folder into my S3 bucket. Then I did the following:

Later, when I run the link (http://chroma-compeng-dev.s3-website-us-east-1.amazonaws.com/) from static web hosting such as: I am getting a blank page...

image

I would highly appreciate your advice...

FYI: The hierarchy of my files in my bucket is: mybucket/(contents of build folder)..., I do not have build folder in my bucket, but I have all contents in there (css,js,static,the rest), but I think that should work right? In addition to that, the bucket was created by someone else before, and not owned by me, do you think that would cause any issue? Thanks a lot!

KHBHH commented 2 years ago

Hi @lidaof

So I checked my console, the following shows:

image

lidaof commented 2 years ago

Hi @KHBHH, I think what you did are right. I pasted my settings below. I don't think you need CORS settings for static web hosting, you do need CORS for the track hosting folder. Can you double-check the settings and we can troubleshoot further?

image image image image
KHBHH commented 2 years ago

Hi @lidaof ,

I have the bucket policy just as you have now, and the following is the objects of my bucket.. (which are basically the contents of build folder): (You can ignore the folders (references and rna-seq)

image

And I am still getting a blank page!

lidaof commented 2 years ago

Hi @KHBHH can you try this https://www.npmjs.com/package/http-server and servers the build folder to see if you can see the page?

KHBHH commented 2 years ago

Hi @lidaof, when I am inside frontend folder: I did npm install --global http-server

and then:

When I do: http-server ./

And visit localhost (http://localhost:8080/) it gives me this:

image

Is this what you were asking for?

KHBHH commented 2 years ago

Hi @lidaof ,

And when I am in my build folder and I do the following: http-server ./

I get this blank page as below:

image

I just checked the console, it is the same bugs that showed when I tried to run the website from the S3 bucket..

lidaof commented 2 years ago

Hi @KHBHH can you zip the build folder and send it to me at lidaof@gmail.com? thanks!

KHBHH commented 2 years ago

Hi @lidaof,

I just sent my build folder zipped, I appreciate the support again, thanks!