This example uses the "Create React App" package:
The objective here is to make sure the app knows the base domain/subdirectory so that resources are referenced correctly. Application domains are dynamic since they include the run ID, so this must be set at runtime. Here is a sample app.sh file that will accomplish this, assuming you have already run create react app to create a new project called 'testing' in your project:
# Modify base url for your deployment (domain.domino.tech), user (test_user), project (react_app) URL_BASE="https://domain.domino.tech/test_user/react_app/r/notebookSession/" # change to point to directory with create-react-app project cd $DOMINO_WORKING_DIR cd testing # Set hostname to the base url for the app in package.json sed "4i \"homepage\": \"$URL_BASE$DOMINO_RUN_ID\"," package.json -i npm run build serve -s build -l 8888
Note that you will need a compute environment with the correct packages (npm/yarn , create react, serve) installed in order to support this
Comments
6 comments
Update for domino 4.x, using the base DAD image you can create an app.sh file that looks like this:
You'll just have to change the url name in the URL_BASE. The key thing here is the ability to set the 'homepage' parameter in the package.json, so that the app knows what url it is running under. This url will change each time you start the app.
Second, make sure to use relative paths (./code.js) instead of explicit paths (/code.js) when referring to locations in your code.
Submitted by: vaibhav.dhawan
Thanks for the example @vaibhav.dhawan ! For those who might not be familiar, create-react-app is a tool you can use to set up a sandbox environment that is suitable for learning React. More info here: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
Submitted by: katie.shakman
Thanks. This would be exactly what I am looking for. How could I run create-react-app within Domino Data lab?
@Julian, you can just run these commands, inside a workspace:
This will create a sample app for you under the /home/ubuntu/ folder called 'memory' (you can change the path of course)
If the 'npm' package is not available in your compute environment, you can add it in or install it manually using these steps:
Thanks that was very helpful. Probably a stupid question but how can I get my react folder into my project repository? Thanks a lot for helping out!
You can just run the 'create-react-app' command under your /mnt/ folder instead, that will allow you to check it into your project
Please sign in to leave a comment.