deployment-docs

Advanced Front End | React (PP5) : Settings

To ensure the application is configured correctly, the web service's configuration settings are required.


A brief explanation of each setting is given below.

Settings

Name

A name is chosen to help identify the deployment. This will be listed in the Render dashboard overview.

The name chosen will form part of the deployed URL. If the name is unique on Render.com, the resulting URL will be <name>.onrender.com. If the name is not unique, a random hash with be appended to the name given, e.g. <name>-3yk1.onrender.com

Root Directory

The root directory of the project and its content. This can be edited if required, but usually it will remain blank, thus indicating the root directory of the repository is the same as the root directory of the web service.

Branch

The branch that the service should be deployed from. This will often be main (or master for older repositories) but is configurable to any public branch within the repository.

Build Command

This is the command that is executed when the deployment build is initiated. The command instructs the yarn package to be built in the environment. yarn is an alternative to npm.

Publish directory

This is the relative path of the directory containing built assets to publish. The directory is created when the yarn build command is run.

Process

  1. Add a Name

    name setting with a meaningful name in the input

    If the name is _not_ unique, a random hash with be appended to the name given, e.g. <name>-3yk1.onrender.com

  2. Ensure the following settings match

    Setting Name Value
    Root Directory blank
    Branch main

    You can deploy from a different branch if required.
  3. Set the Build Command

     yarn build
    

    build command setting with pip install -r requirements.txt in the input

  4. Set the Publish directory

     build
    

    start command setting with a value of python app.py

  5. Click “Create Static Site

    create static site button

Up Next

Due to the nature of a React application, some Redirect/Rewrite rules are required to ensure everything works correctly. The next page will guide you through the process of configuring them.