# Quick Start

{% hint style="info" %}
This guide was last refreshed and tested on April 14th, 2023 against Salesforce v57.0 and React 18.
{% endhint %}

## Setup Your Development Environment (one time)

Reactforce is intended to be installed into your Salesforce project folder.

### Install the Salesforce CLI if necessary

Install the SFDX CLI by following the instructions [here](https://developer.salesforce.com/tools/sfdxcli).

### Install the Reactforce CLI

The easiest way to get up and running with Reactforce is to use the SFDX plugin:

{% tabs %}
{% tab title="Command Line" %}

```
# Install via NPM
sfdx plugins install @cloudpremise/reactforce@latest

# Accept the plugin
This plugin is not digitally signed and its authenticity cannot be verified. Continue installation (y/N) 
y
...
...
...
Installing plugin @cloudpremise/reactforce... installed v0.0.9
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Good to know:** If you would like to bypass the warning message for externally developed SFDX plugins, you can whitelist the [plugin](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_allowlist.htm).
{% endhint %}

### (Optional) Create a trial dev-hub if necessary

{% embed url="<https://developer.salesforce.com/promotions/orgs/dx-signup>" %}
Create a Devhub that will last for 30 days if you do not have a production devhub available to you
{% endembed %}

### Authorize your devhub (one time)

{% tabs %}
{% tab title="Command Line" %}

```
sfdx org login web -a devhub
```

{% endtab %}
{% endtabs %}

## Setup Backend (Salesforce Org)

### Create a new Salesforce Scratch Org

{% tabs %}
{% tab title="Command Line" %}

```
# Create a new project folder
# Note the sfdx CLI is required
sfdx project generate -n backend
cd backend

# Generate the scratch org as a child of the devhub
sfdx force:org:create -f ./config/project-scratch-def.json -a backend

```

{% endtab %}
{% endtabs %}

### Install Reactforce reusable assets

Each project and org should be individually configured with shared assets delivered via a static resource.  The shared assets are helpful for building Reactforce apps that use the [React lightning design system](https://react.lightningdesignsystem.com/).

{% tabs %}
{% tab title="Command Line" %}

<pre><code><strong># From the SFDX project folder (i.e. /backend)
</strong>sfdx reactforce init

# Push the generated static resource into your salesforce org (scratch org)
sfdx force source push -f -u backend
</code></pre>

{% endtab %}
{% endtabs %}

## Create a new Reactforce App

Generate a new Reactforce app using the default settings

{% tabs %}
{% tab title="Command Line" %}

<pre><code># From your SFDX project folder (i.e. /backend)
<strong>sfdx reactforce create -a frontend
</strong>
# Push the generated static resource into your salesforce org (scratch org)
sfdx force source push -f -u backend

# Assign the permission set to the user to authorize the react app components
sfdx force user permset assign -n frontend -u backend
</code></pre>

{% endtab %}
{% endtabs %}

### View the generated app

{% tabs %}
{% tab title="Command Line" %}

<pre><code># Open the org
<strong>sfdx org open -o backend
</strong></code></pre>

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Classic" %}
Open the Salesforce Classic App:

<figure><img src="/files/jjK7RSauKouhtGjGlJUQ" alt=""><figcaption><p>Open the automatically generated frontendAppVF</p></figcaption></figure>

<figure><img src="/files/N8L3kLI97qMf1K2wWTrO" alt=""><figcaption><p>The React app loads with minor modifications to access the Salesforce backend</p></figcaption></figure>
{% endtab %}

{% tab title="Lightning" %}
Open the Lightning App:

<figure><img src="/files/8UEwzmj78CK6blQB6ddA" alt=""><figcaption><p>Open the automatically generated frontendAppLtg</p></figcaption></figure>

<figure><img src="/files/BNzYIY4Pw5cIv0JOC2J9" alt=""><figcaption><p>The React app loads with minor modifications to access the Salesforce backend</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## Modify the react application

This is a good time to setup [Hot-Reloading](/reactforce/reference/wip-reactforce-reference/wip-reactjs/wip-hot-reloading-during-development.md), but it is not covered in this quick start.

### Make a change to the React app

{% tabs %}
{% tab title="React" %}
Find the following file:

/backend/reactforce/frontend/src/App.js

Make a minor change to the code and save the file.  Here is an example modification.

```
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <p>
          Reactforce is awesome!
        </p>
      </header>
    </div>
  );
}

export default App;
```

Save the changes.
{% endtab %}
{% endtabs %}

### Package and publish the react code to Salesforce

{% tabs %}
{% tab title="Command Line" %}

```
# Build the react application.
# Copy the react bundle into force-app/main/default/staticresources
# Run this command from the reactforce application folder (i.e. /backend/reactforce/frontend)

cd ./reactforce/frontend
npm run publishToStaticResources

# Push the Static Resource into Salesforce
# Run this command from the project folder
cd ../..
sfdx force source push -f -u backend
```

{% endtab %}
{% endtabs %}

## Go Impress all your friends

The reactforce command line tool will help you to impress all of your friends assuming your friends like building awesome react applications hosted natively from within Salesforce.  Happy Coding!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cloudpremise.gitbook.io/reactforce/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.