# The customer website

> Source: https://test-allsweb.allsweb.net/sixpanel/docs/customer-website
> Markdown for agents: https://test-allsweb.allsweb.net/sixpanel/docs/customer-website.md
> Publisher: AllsWeb (www.allsweb.com)

Part of: SixPanel documentation

**What this page is for:** put the separate React storefront — the website your
shoppers browse — on its own domain, next to the 6ammart admin site.

**You need**

- Your website code, in one of two shapes:
  - the **zip** you downloaded from CodeCanyon (the "React user website" item), or
  - the **git repository URL** of your customer-website code — this is a second
    repository, not the admin one. If it is private, you can use either an
    access token or this server's own deploy key; the screen asks which and
    walks you through it, exactly as the admin app's install does.
- A domain or subdomain for it, for example `shop.example.com`.
- Your 6ammart admin app already installed and working.

The customer website is not an add-on nobody uses: it is how customers order
from a browser rather than from the phone apps. A project can sell through the
apps alone, and some do, but most people want both.

## 1. Deploy the website code

1. Open the project's **Deploys** page (in the **Project** menu group).
2. Find the **Customer website** section.
3. Choose where the code comes from:
   - **From a zip file** — pick your CodeCanyon website zip. Upload the whole
     download if you like: it usually contains the site *and* a "changed files"
     folder for people upgrading by hand, and the panel takes the complete one
     and says in the log which it skipped.
   - **From a git repository** — paste the repository URL. The screen then asks
     how this server should read it:
     - **HTTPS — with an access token.** Leave the token blank for a public
       repository; paste one only if it is private.
     - **SSH — with this server's deploy key.** Nothing secret is stored here:
       the panel makes a key, you add it to the repository, and the server uses
       it from then on. This is the website's **own** key, separate from the
       admin app's, so the two repositories can use different keys.

     Then press **Test connection**. It answers in about a second — whether the
     server can read the repository, and which branches it has — so you pick the
     branch from the real list instead of typing one, and a wrong token is found
     now rather than several minutes into a build. The install button stays off
     until that test passes.
4. Press the install button.

The job unpacks or downloads the code, installs its dependencies, builds the
site, points it at this project's admin address and starts its service. On a
small server the build takes several minutes and uses a lot of memory — this is
the heaviest thing that ever runs on the machine, which is why the installer
adds swap space on servers with little RAM. Watch the log; the last lines say
the website is running.

**The build happens here, on your server.** There is nothing to build on your
own computer and no need for Node.js anywhere else — SixPanel installs the Node
version the storefront needs as part of the server setup.

Later, a newer zip is uploaded the same way: the **Customer website** card
offers **Upload a newer website zip** once a site was installed from one. Your
settings survive; only the code is replaced.

### Before the website exists

The moment you give the storefront a domain, that address gets a certificate and
starts working — and until you have deployed the site, it serves a short page
saying the shop is not open yet and pointing back at this step. That is normal.
It disappears by itself the moment the storefront starts.

## 2. Give it a domain

1. Open **Domain & SSL** (in the **Project** menu group).
2. Find the **Customer website** section and press **Add domain**.
3. If Cloudflare is connected, the panel creates the DNS record for you,
   proxied. Otherwise add an **A record** for that name at your DNS provider,
   pointing at this server's IP address — the page prints it for you.
4. Press **Re-check DNS** until the name shows **pointed**.
5. Press **Get free SSL**.

When you created the project from a single domain, this name was already
suggested and registered for you — usually the domain itself, plus `www.`

## 3. Turn the website service on

1. Open **Advanced** → the **Services** tab (in the **Project** menu group).
2. In the **Customer website** card, turn it on.

The first deploy already starts the service, so this card is mostly for turning
it off and on again later. The card also tells you when the website is one of
the things your project still needs.

Over SSH, the same two actions:

```
sudo sixpanel service enable react
sudo sixpanel service disable react
```

`disable` only stops it now. It is not remembered: `sixpanel service start all`
and the panel's own Services tab both bring it back. To turn it off for good,
use the switch on that tab — the panel records that as your decision and never
starts it again by itself.

## 4. Update it later

Open **Deploys** → the **Customer website** section and press the update
button. It pulls the newest code, rebuilds and restarts the site.

**Your shop stays up while it builds.** The new version is built in a separate
folder beside the live one, and only a build that finished is switched in —
the switch and the restart take a few seconds. If the build fails (a code
error, or the server ran out of memory), nothing on the live website changes:
it keeps serving the version it had, and the job log says why the build
stopped.

If you set up push-to-deploy, a push to the **website** repository does this by
itself. The website has its **own** webhook address and its own secret,
separate from the admin app's — set it up once on the **Deploys** page. See
[Deploy and update your code](https://test-allsweb.allsweb.net/sixpanel/docs/deploy-update).

## How to check it worked

- Open your website domain in a browser. You should see the storefront with a
  padlock in the address bar.
- **Domain & SSL** shows the website name as **secured**.
- **Advanced → Services** shows the customer website running.
- `sudo sixpanel service status react` prints it as running.

## If it went wrong

- **The build failed** — read the job log on the **Deploys** page. A wrong
  branch name, a private repository the server cannot read, or a server that
  ran out of memory during the build are the usual causes. For the second one,
  see the read-access key in section 5 of [Put your code in a git
  repository](https://test-allsweb.allsweb.net/sixpanel/docs/put-your-code-in-git). Your live website is unaffected
  either way. For the third, the build is given as much memory as is free
  when it starts (the **build heap** line in the log), so running the update
  again while the server is quieter often succeeds; if it fails again at the
  same size, the server needs more memory or swap.
- **The domain shows the admin site, not the storefront** — the domain was
  added under the wrong section. It must sit under **Customer website** on
  **Domain & SSL**.
- **The page is blank or shows an error** — read its log on the project's
  **Logs** page, or over SSH:
  ```
  sudo sixpanel logs react -n 100
  ```
- **The folder is not empty** — the panel refuses to clone into a folder that
  already holds files but is not a git checkout. Ask support before clearing
  it.

More symptoms: see [When something is broken](https://test-allsweb.allsweb.net/sixpanel/docs/troubleshooting).
