Ecommerce Skelleton

Ecommerce skeleton is a skeleton template for anyone who wants to use vuejs to start an ecommerce store. This Skeleton has firebase and stripe payments built right in so all you need to do is setup a firebase account and a stripe account, add the API keys and start selling!

Features

Firebase Cloud Firestore
Firebase Auth
Firebase functions
firebase hosting
Stripe Payments
Vuetify
Vuejs

Included

Database CSV Uploader

Plugins

Firebase
Vuetify
Vuex
Vue-router
Vuefire
Vue-stripe-checkout

Installation

yarn install
yarn run serve

Config Folder

Create a config folder in src so the path is src/config

Create 2 files firebase.js and stripe.js

firebase.js File structure:

    const firebase_config = {
        apiKey: "YOUR API KEY",
        authDomain: "YOUR AUTH DOMAIN",
        databaseURL: "YORU DATABSE URL",
        projectId: "YOUR PROJECT ID",
        storageBucket: "",
        messagingSenderId: "YOUR MESSAGE SENDER ID",
        appId: "YOUR APP ID",
    };

    export default firebase_config;

stripe.js file structure:

    const stripe_config = {
        stripePublishableKey: "YOUR STRIPE PUBLISHABLE API KEY"
    }

    export default stripe_config

Firebase setup

Follow the directions on setting up a firebase project then once you have a project follow the steps below to integrate.

In your firebase console go to the gear Icon and click "Project Settings"
Scroll down and get the firebase keys from FIrebase SDK snippet

    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGE_SENDER_ID",
    appId: "YOUR_APP_ID"

Once you have found these go back to your project and copy the lines into the firebase.js file in the config folder (src/config/firebase.js)

Once that is complete, your application should now be able to communicate with firebase.

Setup Authentication

In the firebase console click on authentication and enable email authentication.
You should now be able to create users through the front end application

Upload Items to DB

Through the terminal navigate to the backend folder and install the dependencies

npm install
you will need to get the admin access token from your firebase database to upload items to the database.
Go to the firebase console, click on the gear icon and Project Settings
Click on the Service Accounts tab and "Generate a new provate key"
save this file in your uploader folder
In the index.js file change User Variables on line 2 and 3 to:

const serviceAccount = require("./your-project-firebase-admin-sdk.json") const databaseURL = "https://YOUR_DATABASE_URL.firebaseio.com"
The collectionKey can be either "items", "categories" if you want to work with the base template. You are free to add more collections for your store. :)
Please keep in mind you will need to create the store modules for each collection you add.

Upload file

In the backend/data folder you will find a UploadItems.csv file. This will be the file you will need to add items to the store.
Please do not change the headers in this file because they are directly linked to the item page.
If you do want to add more headers then you are welcome to do so.
Please keep in mind you will need to update the item page to accommodate your new headers

Once that is complete you should now be able to upload items to the data base by navigating to backend/uploader and running:

node index.js

If all items were successfully uploaded, the output should be:

Document --- successfully written!

Stripe Payments Setup

First you will need to create a stripe payments account from stripe.com. Follow the instructions on stripe to get a secret key and public key. Once you have those then follow the instructions below to integrate:

If you have not already then you will want to install firebase CLI
Follow the instructions here to install Firebase CLI https://firebase.google.com/docs/cli/
Once you've installed the Firebase CLI, create a shell app by running

firebase init
Select Database, Functions, and Hosting. Then, select your Firebase project from the project list.

Test that it works

To deploy your shell app, run

firebase deploy
Check that your app is running.

Configure Stripe

Once you have your client API Key
Go to the Config folder in src/config and update the file stripe.js
Update the stripePublishableKey with your key

One that is done then you can configure your stripe server key.

run the following command from backend/firebase:

firebase functions:config:set stripe.token="your-test-secret-key"
Push your new changes by running

firebase deploy

Once you have that setup you can add hosting to your application's front end.

Cofigure Firebase Hosting

Go to your main project folder and run:

firebase init

Select your project and select "hosting"
Then run:

firebase deploy

Visit your payments app's URL at your-firebase-project-id.firebaseapp.com and check that the following features work:

Your Name and Email is displayed on the profile page.
You can enter a credit card and Add it.
You can create a new Charge.
You can sign out.

Done!

Congratulations! You have completed the setup of the ecommerce skeleton! We hope you enjoy this skeleton application and we can't wait to see what else you will create with this!

uzirthapa/ecommerce-biolerplate