Articles in this section

Publish a react app through Domino

Vaibhav Dhawan
  • Updated
Follow

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

Related articles

Comments

6 comments

Date Votes
  • Jaclyn Patterson

    Update for domino 4.x, using the base DAD image you can create an app.sh file that looks like this:

    URL_BASE="https://staging.domino.tech/$DOMINO_PROJECT_OWNER/$DOMINO_PROJECT_NAME/r/notebookSession/$DOMINO_RUN_ID"
 
cd /home/ubuntu/
sudo npm install --global create-react-app
sudo create-react-app memory
cd memory/
 
 
#Set hostname to the base url for the app
sudo sed "4i   \"homepage\": \"$URL_BASE\"," package.json -i
 
echo $DOMINO_WORKING_DIR
echo $URL_BASE
echo $DOMINO_RUN_ID
 
sudo npm run build
 
sudo npm install -g serve
serve -s build -l 8888

    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

    0
    Comment actions Permalink
  • Jaclyn Patterson

    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

    0
    Comment actions Permalink
  • Julian Stoeckli

    Thanks. This would be exactly what I am looking for. How could I run create-react-app within Domino Data lab?

    0
    Comment actions Permalink
  • Vaibhav Dhawan

    @Julian, you can just run these commands, inside a workspace:

    cd /home/ubuntu/
sudo npm install --global create-react-app
sudo create-react-app memory
cd memory/

    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:

    • sudo apt update
    • sudo apt install nodejs
    • sudo apt install npm
    0
    Comment actions Permalink
  • Julian Stoeckli

    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!

    0
    Comment actions Permalink
  • Vaibhav Dhawan

    You can just run the 'create-react-app' command under your /mnt/ folder instead, that will allow you to check it into your project

    0
    Comment actions Permalink

Please sign in to leave a comment.