Essential Ecommerce Store (Launch)

 

LAUNCH AN ESSENTIAL ECOMMERCE STORE

Step by Step Instructions (Video & Text)

Updated on May 10 2021

 
 

STEP 1 OF 21: BUY A DOMAIN NAME (IONOS 1 & 1)

What is a domain name? Click here to read more

In this example, we will buy a domain from IONOS 1 & 1. Other popular registrars are:

Click here to go to IONOS 1 & 1

VIDEO (1:52 min): Buy a domain name from IONOS 1 & 1

Complete your registration, make sure you received an email to confirm ownership of your recently purchased domain name. You will not be able to use your domain name if you do not confirm ownership. Check your email and confirm your domain ownership as soon as you can.

SAVE: Save the next values, you will need them later.

Registrar IONOS 1 & 1
Domain Name your-domain.com
Login User your_email or your-domain.com
Login Password your_password

 

STEP 2 OF 21: POINT TO DIGITAL OCEAN NAMESERVERS FROM COMMON DOMAIN REGISTRARS (IONOS 1 & 1)

VIDEO (3:14 min): Point domain DNS to Digital Ocean servers

Click here to read instructions for other domain registrars

Add the next 3 custom nameservers to your domain:
ns1.digitalocean.com.
ns2.digitalocean.com.
ns3.digitalocean.com.

 

STEP 3 OF 21: GET REGISTRAR IP (IONOS 1 & 1)

If your registrar company is not IONOS 1 & 1, and you can not find your domain IP Address, you might need to contact your registrar company's support team and ask for your domain IP Address. Tell them you need it because you are setting up custom DNS servers with Digital Ocean, and you need the IP Address to make your registrar email addresses work.

VIDEO (1:15 min): Get registrar IP

SAVE: Save your registrar domain IP address.

Registrar IONOS 1 & 1
Domain Name your-domain.com
Login User your_email or your-domain.com
Login Password your_password
Domain IP Address xxx.xx.xx.xxx

 

STEP 4 OF 21: CREATE PROFESSIONAL EMAIL ADDRESSES (IONOS 1 & 1)

 
Example Addresses:
info@yourdomain.com
sales@yourdomain.com
contact@yourdomain.com
support@yourdomain.com
email-services@yourdomain.com

VIDEO (2:25 min): Create PRO Email Addresses

If you are limited to add only 1 email address and no more, you might need to order the MailBox25 email package, which allows you to add up to 25 different email addresses. See how in the video below:

VIDEO (0:37 min): Order MailBox25 Email Package (Includes up to 25 Email Addresses)

Learn how to login to your newly created email address, send and see received emails. See how in the video below:

VIDEO (1:29 min): Access your new email address inbox

Click here to access your email addresses inbox

 

STEP 5 OF 21: CREATE YOUR DIGITAL OCEAN ACCOUNT

We will be using Digital Ocean to store our ecommerce website files. Completing this step will make the files that comprise our ecommerce website (code, images, etc.) available for viewing online. Every website you’ve ever visited is hosted on a server. In our case, we will use Digital Ocean to store our files and make our ecommerce store website available everytime a user visits your domain.com page.

Click Here to create an account on DigitalOcean

VIDEO (0:18 min): Create your Digital Ocean account

SAVE: Your Digital Ocean account login Email and Password
 
Email your_email@email.com
Password your_password

 

STEP 6 OF 21: CREATE A NEW PROJECT AND DROPLET

What is a Digital Ocean Droplet? DigitalOcean Droplets are Linux-based virtual machines (VMs) that run on top of virtualized hardware. Each Droplet you create is a new server you can use, either standalone or as part of a larger, cloud-based infrastructure. Click here to read more.

VIDEO (3:20 min): Create New Project and Droplet

SAVE: Your Project Name, Droplet's IPv4 Address (xxx.xxx.xxx.xxx), Droplet Login Credentials User (root) and Password. By default, Droplet login user is root.
 
Project Name your_project_name
Droplet IPv4 Address xxx.xxx.xxx.xxx
Droplet Login User root
Droplet Login Password your_password

 

TEXT INSTRUCTIONS

Create a new project and add a name.

Create a new droplet and select the next options:

  • • Choose an image > Distributions: Ubuntu 16.04 (LTS) x64
  • • Choose a plan: Shared CPU - Basic
  • • CPU Options: Regular Intel with SSD - $5/mo
  • • Choose a datacenter region: San Franciso - 3
  • • Authentication > Password > Create root password: In the example below, we added an example password YourPassword2021!Z but you will have to add a personal password.
  • • Wait 1-3 minutes until your droplet is created.

 

STEP 7 OF 21: CONNECT YOUR DOMAIN TO DIGITAL OCEAN DROPLET AND ENABLE REGISTRAR EMAIL SERVICE (IONOS 1 & 1)

Follow the steps in the video below to add your domain to DigitalOcean and enable your registrar (IONOS 1 & 1) email. To enable your email, you will need to add your Registrar Domain IP Address on DigitalOcean as shown in the video below.

VIDEO (1:15 min): Get registrar IP

VIDEO (6:15 min): Connect your domain to DigitalOcean Droplet and enable IONOS 1 & 1 email.

 

STEP 8 OF 21: SETUP DROPLET (INSTALLATIONS)

 
Recall that a Droplet is just a server that hosts our project or website files to be available online. In the previous step, we connected our domain name to our DigitalOcean droplet. That way, everytime someone visits your-domain.com, they will be accessing your droplet or server which will host our ecommerce website project files. We will install our ecommerce website project files later, but first we need to prepare or configure our droplet/server to be able to host and run our ecommerce website project files.
 
For this step, you will need your Droplet's credentials user and password (This are NOT the same as your DigitalOcean account login email and password). By default, user is root:
 
Droplet's Login User: root
Droplet's Login Password: YourPassword
 

VIDEO (14:20 min): Setup Droplet (Installations)

Click here to see the full list of Droplet's installations commands

 
After completing this step, ecommerce store website project files are already installed on our Droplet. But a configuration is still needed before building and running our site. Move to the next step to sign up on MongoDB and create a database.
 
 

STEP 9 OF 21: MONGODB CLOUD SIGNUP

MongoDB is a database service that will allows us to have our application data accessible from anywhere. It is where information such as customers, user accounts, products, orders, and more will be saved.

VIDEO (1:32 min): MongoDB Cloud SIgn Up

Click here to Sign Up at MongoDB Cloud

 

STEP 10 OF 21: CREATE MONGODB CLOUD PROJECT AND DATABASE

The next configuration is needed to put up our database and start saving data.

  • • Create a New Project
  • • Create a Cluster
  • • Add Database User and Password
    •      - Save Database User as owner
    •      - For Password select 'Autogenerate secure password', save autogenerated password
  • • Allow Access From Anywhere
  • • Get Connection String
    •      - Make sure user is owner
    •      - Replace <password> with your autogenerated password
    •      - Replace myFirstDatabase with main-db
    •      - Example of connection string:
      • mongodb+srv://owner:<password>@cluster0.5es4m.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
  • • Create database, call it main-db.

See the video below for step by step instructions on the steps above.

VIDEO (11:06 min): Create MongoDB Cloud Project and Database

SAVE: Project name, your password and db connection string. Set database user as owner and database name as main-db
 
Project Name My New Project
Database User owner
Database Password Your Password zjzsxx
Database Name main-db
DB Connection String xxxxxxxxxxxx

 

STEP 11 OF 21: DOWNLOAD SUBLIME

Sublime is just a text editor that will help us edit our configuration files.

VIDEO (1:37 min): Download Sublime

 

STEP 12 OF 21: DOWNLOAD FILEZILLA

FileZilla is just a program that will allows us to connect to our DigitalOcean Droplet. Recall that a Droplet is just a server or computer that hosts our ecommerce store website project files. Our project is installed on a directory inside our Droplet (/var/www). You can compare this as going to your computer's document folder to access a specific file. FileZilla will allows us to connect to our Droplet, or remote computer, and access the directory where our project files are installed.

VIDEO (1:39 min): Download FileZilla

 

STEP 13 OF 21: CONFIGURE FILEZILLA TO EDIT FILES WITH SUBLIME

Make sure that we can open files with Sublime by default when using FileZilla to edit files.

VIDEO (0:29 min): Configure FileZilla to edit files with Sublime

 

STEP 14 OF 21: USE FILEZILLA TO CONNECT TO YOUR DROPLET

Add the next FileZilla configuration to be able to connect to your DigitalOcean Droplet.

  • Add a New Site
  • General > Protocol: SFTP
  • General > Host: Your Digital Ocean Droplet's IPv4 Address
  • General > Logon Type: Ask for password
  • User: root
  • Hit connect, type password and check the box. (Your password is: Your Digital Ocean Droplet's Password)

See video below for step by step instructions on the steps above.

VIDEO (2:05 min): Use FileZilla to connect to your Droplet.

 

STEP 15 OF 21: RECONNECT TO DROPLET (FILEZILLA)

FileZilla disconnects from your Droplet or site, every n minutes. Watch the video below to quickly reconnect to your site or Droplet if you got disconnected.

VIDEO (0:20 min): Reconnect to Droplet (FileZilla)

 

STEP 16 OF 21: USE FILEZILLA TO CONFIGURE YOUR PROJECT

The ecommerce website project files are already installed on your DigitalOcean Droplet.

Let's add some final configuration to the project by editing a few project files. We will connect to your Droplet using FileZilla, then going to the ecommerce project directory (/var/www/store-web-1.0.0) and there we will use Sublime to edit some files found inside the /store-web-1.0.0 project folder.

VIDEO (8:09 min): Use FileZilla to configure your project

TEXT INSTRUCTIONS

• Go to directory:
/var/www/store-web-1.0.0
 
• Change homepage to your domain name at:
package.json > “homepage”: "https://yourdomain.com"
 
• Change Site Name at:
/theme/assets/manifest.json
 
• At /config, delete the next files:
admin.js
server.js
store.js
 
• At /config, rename the next files:
admin-prod.js    to    admin.js
server-prod.js    to    server.js
store-prod.js      to    store.js
 
• DB Connection String
Go and get your DB Connection String from wherever you saved it, then right click and copy it.
 
• Project configuration at /config/generalConfig.js
1 - Paste Your DB Connection String
2 - Make Sure Developer Mode is FALSE
3 - Make Sure Protocol is HTTPS
4 - Make Sure useLocalDB is FALSE
5 - Make Sure to add your domain name

 

STEP 17 OF 21: BUILD & RUN PROJECT

See video below for step by step instructions on how to build and run project.

VIDEO (6:36 min): Build & Run Project

TEXT INSTRUCTIONS

We will use DigitalOcean Droplet's console to build and run project by using the commands below:

cd /var/www/store-web-1.0.0
 
pm2 kill
 
npm install --legacy-peer-deps
 
npm run build
 
npm run setup-starter-data store-owner-email-address@mail.com https://yourdomain.com
 
pm2 start process.json
 
pm2 start process.json

 

STEP 18 OF 21: NGINX CONFIG

Watch the video below to see how to create your NGINX configuration

VIDEO (7:23 min): NGINX Config

TEXT INSTRUCTIONS 

Go to the link below, make sure to have your domain name and DigitalOcean Droplet IPv4 address at hand. You will need them to replace a few values of the green text found in the link below. Copy the text found on the next link, paste it on a text editor like Sublime, and then replace some values by your domain name and your DigitalOcean Droplet IPv4 address. You will find more instructions in the link below:
 
 
• Using FileZilla, go to:
/etc/nginx/sites-enabled
Delete the default file
 
• Go to:
/etc/nginx/sites-available
Open file, select all test and delete all
 
• Add NGINX Configuration:
Add NGINX configuration and replace YOUR_SERVER_IPV4_ADDRESS andYOUR_DOMAIN_COM by your server ip address and your domain-name.com. Click here to see the NGINX Configuration, copy the green text, and replace the 2 values mentioned above by your own server ip address and your-domain.com
 
• VERIFY YOUR CHANGES… THIS STEP IS VERY IMPORTANT IN ORDER TO LOAD YOUR SITE PROPERLY
 
Finally, open your Droplet's console, and add the next 2 commands:
 
• Copy & paste this command to your Droplet's console, and hit enter.
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/
 
• Copy & paste this command to your Droplet's console, and hit enter.
sudo systemctl restart nginx
 
• Wait 5-20 minutes, visit your Droplet's IP address on your browser and it should load the site. Some files like logo or other images will not load yet, but will load after we install an SSL Certificate. We will install an SSL Certificate later following the steps below.

 

STEP 19 OF 21: TEST PROJECT BY VISITING YOUR DROPLET'S IP ADDRESS ON WEB BROWSER

Copy your DigitalOcean Droplet IP address and paste it to your web browser to load your site.

VIDEO (0:35 min): Test and Load Project Using Droplet IP Address

 

STEP 20 OF 21: SSL CERTIFICATE SETUP

A website that has an SSL certificate ensures all website traffic between your web server and user's browser is secure and cannot be read. When your website has an active SSL certificate the application protocol changes from HTTP to HTTPS. Setting up an SSL Certificate will also make your page show a green padlock. The green padlock simply means that traffic to and from the website is encrypted.

VIDEO (4:27 min): SSL Certificate Setup

TEXT INSTRUCTIONS

Open your DigitalOcean Droplet's console and copy, paste and hit enter the commands below one by one:
 
Copy command below, paste it to your droplet's console and hit enter:
sudo snap install core; sudo snap refresh core
 
Copy command below, paste it to your droplet's console and hit enter:
sudo apt-get remove certbot
 
Copy command below, paste it to your droplet's console and hit enter:
sudo snap install --classic certbot
 
Copy command below, paste it to your droplet's console and hit enter:
sudo ln -s /snap/bin/certbot /usr/bin/certbot
 
Copy command below, paste it to your droplet's console and hit enter:
sudo certbot --nginx 
• Enter your email and hit enter
• Then enter Y and hit enter
• Enter Y and hit enter again
• Finally HIT ENTER to add https protocol to both yourdomain.com and www.yourdomain.com
 
Copy command below, paste it to your droplet's console and hit enter:
sudo certbot renew --dry-run

 

STEP 21 OF 21: TEST YOUR DOMAIN HTTPS BY VISITING YOUR DOMAIN ADDRESS ON WEB BROWSER

Finally, go to your browser and visit your domain address. You should see the ecommerce website project running. In case it shows an error, just wait 24 - 72 hrs. Domain setup have a configuration delay of 2-72 hrs. Often happens when you just bought a new domain.

VIDEO (1:02 min): Visit your domain address on web browser and it should load ecommerce web project.

 

--------------------------------------------------------------------

CONGRATULATIONS !!!

--------------------------------------------------------------------

CONTACT US IF YOU NEED SUPPORT - CLICK HERE