Search code examples
nginxdeploymentweb-deploymentparceljs

How do I deploy my web app built with ParcelJS on my Ubuntu 18.10 server?

I have an HTML webpage which uses some CSS and TypeScript. I've been using the ParcelJS development server to build and test my page.

Now I want to serve my app over a Web server. I have an Ubuntu 18.10 DigitalOcean droplet/virtual machine that has nginx set up.

I cloned my code onto my server, installed ParcelJS, and ran parcel build index.html following instructions here.

Then I tried to deploy my webpage by creating a symlink from /var/www/mysitedomain/html/app.html to ~/myappdir/dist/index.html.

This (kind of) works: when I visit my website, my browser loads my index.html.

However, none of my CSS is rendering, and my scripts also seem to not be running!

Clearly, I'm doing something wrong. What should I be doing instead to deploy my application?

Here is my abridged index.html (after running parcel build index.html):

<!DOCTYPE html>
<head>
  <title>Nothing to see here!</title>
  <link rel="stylesheet" href="/sidebar.04cc1813.css">
</head>
<body>
  <aside class="sidenav">
    <h1>A sidebar</h1>
  </aside>

  <section class="main">
    <p>Welcome to the semantic web!</p>
  </section>
  <script src="/main.9b45144c.js"></script>
</body>

Here is my /etc/nginx/sites-enabled/mysite.com:

server {
        listen 80;
        listen [::]:80;

        root /var/www/mysite.com/html;
        index index.html index.htm index.nginx-debian.html app.html;

        server_name mysite.com www.mysite.com;

        location / {
                try_files $uri $uri/ =404;
        }  
}
Solution

  • Adding the --public-url ./ CLI arg to your parcel command will tell parcel to emit asset URL references relative to the given base url. I.e. Your existing:

    <script src="/main.9b45144c.js"></script>

    will turn into:

    <script src="./main.9b45144c.js"></script>

    Same with CSS and other assets...

    Also see: https://parceljs.org/cli.html#set-the-public-url-to-serve-on