
Vendure is an open-source headless commerce framework that allows to build production-ready e-commerce applications powered by Node.js, TypeScript and GraphQL. It works by exposing all application functionality through APIs. Vendure exposes all the shop front-end functionalities on the GraphQL API and doesn't offer a default storefront interface. This improves developer flexibility because it allows you to create your storefront using any front-end technology.
This guide explains how to deploy Vendure on a Ubuntu 22.04 Vultr Server. You are to integrate the framework with Vultr Object Storage, a Managed Database for PostgreSQL, and Valkey to build a production-ready application.
Before you begin:
Deploy a Vultr Managed Database for Valkey.
Deploy a Vultr Object Storage
Set up a domain A record pointing to the server
Using SSH, log in to the server as root
Create a non-root user with sudo privileges
Switch to the new sudo user account
Install s3cmd on the server:
Vendure required the Node.js version 16.x or above. Install the latest Node.js version as described in the steps below.
Update the server
Create the keyrings directory
Download and add the Node source GPG key to your server keys
Add the Node.js repository to your apt sources list. Replace 20 with your desired version
Update the server packages
Install Node.js
Verify the installed Node.js version
Output:
To install Vendure on the server, you need to temporarily save the application data on your local PostgreSQL database server. Later, you can migrate the data to a Vultr Managed Database for MySQL before deploying the application to production. Set up the local database as described below.
Verify the installed PostgreSQL version
Output:
Depending on your PostgreSQL version, edit the pg_hba.conf file using a text editor such as nano
Find the following configurations line
Change the peer authentication method to md5
Save and close the file
Restart the PostgreSQL database server
Log in to the PostgreSQL database server
Create a new database
Output:
Create a new database user with a strong password
Output:
Grant the user full privileges to the Vendure database
Output:
Quit the PostgreSQL console
Using the npx Node.js tool, Install Vendure using the @vendure/create tool.
Reply to each of the installation prompts as described below
Press Y to install the @vendure/create package
Select Postgres as a database in use
Press Enter to set localhost as the PostgreSQL hostname
Press Enter to keep 5432 as the PostgreSQL port number
Enter the PostgreSQL database name you created earlier
Press Enter to keep the PostgreSQL schema set to public
Enter the PostgreSQL user you created earlier
Enter the PostgreSQL database user password you created earlier
Press Enter to keep superadmin as the default administrator username. Change the username to your desired value
Enter your desired super administrator username or press Enter to use the default password
Select yes and press Enter to populate the database with sample product data
When successful, the installation process should complete with the following output:
List files in your working directory
Output:
Verify that a new vendure-app directory is available on the list
Log in to your Vultr Managed Database for PostgreSQL. Replace vultradmin, 1234, host.vultrdb.com with your actual values
Or, copy and use your database connection string from your Vultr Managed Database for PostgreSQL control panel
When logged in, create a new database
Output:
Quit PostgreSQL console
Back up your PostgreSQL database to the venduredb.sql file using the user and database you created earlier
When prompted, enter the correct Vendure user database password you set earlier
Using the backup file, restore the database to your Vultr PostgreSQL Managed Database. Replace host.vultrdb.com,vendure_db,vultradmin with your actual details.
When the restoration is complete, access your Vultr Managed Database for PostgreSQL
View the Vendure database tables
Output:
Enter Q to exit the PostgreSQL pager
Exit the PostgreSQL console
In your Vultr Console, download the Vultr Managed Database for PostgreSQL signed certificate file ca-certificate.crt
When downloaded, in your terminal session, use scp and upload the file to your server
When uploaded, verify that the certificate file is available in your user home directory
Output:
Move the certificate file to the /usr/local/share/ca-certificates/ directory.
Edit the vendure-config.ts file
Import the readFileSync method from the node:fs at the top of the file
Add the following declarations to the dbConnectionOptions section
Your edited dbConnectionOptions section should look like the one below:
Save and close the file.
Switch to the vendure-app directory
Edit the .env file
Update the following existing variables with your Vultr Managed Database for PostgreSQL details
Save and close the file.
Log in to the Vultr Console
Navigate to Products -> Cloud Storage -> Object Storage.
Access your Vultr Object Storage control panel
Navigate to Buckets
Click the Create Bucket button, and assign the bucket a name of your choice. For example vendure
View your working directory
Verify that you're operating in the vendure-app directory, or switch to the directory
Using the s3cmd tool, synchronize the Vendure assets directory to your Vultr Object Storage bucket
Verify that the file transfer completes successfully
Using npm, install the @aws-sdk/client-s3 and @aws-sdk/lib-storage packages
Edit the environment.d.ts file
Add the following configurations within the ProcessEnv function
Save and close the file.
Your edited file should look like the one below:
Edit the .env file:
Add the following environment variables to the file. Replace the placeholder values with your actual Vultr Object Storage details
Save and close the file.
You can view your Vultr Object Storage details on the instance overview section
Back up the original vendure-config.ts file
Create the file again
Add the following updated contents to the file. Replace example.com with your actual domain
Save and close the file.
The above configuration imports the configureS3AssetStorage and asset-server-plugin assets to Vendure. Then, it defines the Vendure URL example.com in the AssetServerPlugin.init({ section.
Vendure keeps the job queue in the PostgreSQL database by default. To store the jobs in a Vultr Managed Database for Valkey, use the BullMQ job queue plugin as described in the steps below.
Install the BullMQ job queue plugin
Edit the environment.d.ts file
Add the following declarations to the ProcessEnv interface after your S3 directives
Save and close the file.
Edit the vendure-config.ts file
Add the BullMQJobQueuePlugin import directive at the top of the file
In the plugins: section, find the DefaultJobQueuePlugin initialization directive
Replace it with the following BullMQJobQueuePlugin declarations
Save and close the file.
Edit the .env file
Add the following environment variables at the end of the file. Replace the placeholder values with your Vultr Managed Database for Valkey details
You can find your Vultr Managed Database for Valkey details on your instance overview section
Vendure stores the session object cache in your system memory. It's fast and suitable for a single-instance deployment. However, for horizontal scaling or multi-instance deployment, you must store the session cache to an external data store such as a Vultr Managed Database for Valkey. To enable Valkey, create a custom session cache strategy as described below.
Create a new redis-session-cache-strategy.ts file in the plugins directory
Add the following configurations to the file
Save and close the file
Edit the vendure-config.ts file
Add the RedisSessionCachePlugin directive to the import section
Within the Plugins: [ section, add the following code after AdminUiPlugin.init(...) to initialize the RedisSessionCachePlugin
Save and close the file.
Edit the .env file
Change the APP_ENV value from dev to production
Save and close the file.
Install the Vendure harden plugin that locks down your schema and protects your shop API from malicious queries
Edit the vendure-config.ts file
Add the following harden plugin import directive to the import section
Within the Plugins: section, add the following code to initialize the harden plugin
Save and close the file.
The edited vendure-config.ts file should look like the one below:
Build the Vendure application
npm writes the build files to the dist directory
Install the PM2 package
Run the Vendure app server in cluster mode
Run the Vendure app worker in cluster mode
Output:
Generate and run a startup script to start PM2 when the server reboots
Output:
Save all the running processes
Using wget, test that your Vendure app runs on the default port 3000
Output:
If Vendure fails to run and listen on port 3000. Start it using the following command to view the runtime log and catch any errors
Output:
When successful, verify that Vendure runs on port 3000
To securely access the Vendure app through your domain name, configure Nginx as a reverse proxy to handle connections to the backend port 3000 as described below.
Install Nginx
Disable the default Nginx configuration
Create a new Nginx virtual host configuration file
Add the following configurations to the file. Replace example.com with your actual domain
Save and close the file.
Enable the Nginx configuration file
Test your configurations from syntax errors
Reload Nginx configurations to save changes
To secure Vendure for production use, allow Nginx to accept incoming connections on HTTP port 80 and the HTTPS port 443. Then, securely redirect all HTTP requests to HTTPS by generating SSL certificates as described in the steps below.
Allow SSH port connection to the server
Allow the Nginx HTTP and HTTPS ports profile
Enable the firewall
Verify the firewall status
Output:
Using snap, install the Certbot Let's Encrypt client tool
Create a symbolic link for the system wide Certbot command to /usr/bin
Generate your Let's Encrypt SSL certificate. Replace example.com, hello@example.com with your domain, and email address respectively
Verify that Certbot auto renews the SSL certificate upon expiry
Using a web browser such as Chrome, access your Vendure shop administrator page
Log in with the superadmin credentials you set earlier. When successful, the administrator dashboard should display
Navigate to the Inventory menu. Verify that all sample products display on the page. Try to update or delete any of them.
Navigate to the Assets menu and upload a sample image
In your Vultr Console session, view your Vultr Object Storage bucket. Verify that the image is available in your bucket
Besides the Vendure administrator page, access the GraphQL API endpoints below:
https://example.com/admin-apihttps://example.com/shop-apiWhen you design your Vendure Shop, the frontend interface activates with your products and design.
In this guide, you installed and deployed a Vendure application to a production environment. You also configured Vendure to use Vultr Object Storage, a Vultr Managed Database for PostgreSQL, and Vultr Managed Database for Valkey. For more information about Vendure, visit the official documentation.
For more information, visit the following resources:
0 Comments
Be the first to comment and share your perspective with the community.