Publish a react app through Domino

vaibhav.dhawan
vaibhav.dhawan Member, Administrator, Moderator, Domino Posts: 7 admin
edited August 2019 in Tutorials & Best Practices

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

Tagged:

Comments

  • katie.shakman
    katie.shakman Administrator, Domino Posts: 257 admin

    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

    Katie

    Field Data Scientist @ Domino

  • vaibhav.dhawan
    vaibhav.dhawan Member, Administrator, Moderator, Domino Posts: 7 admin

    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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!