Vue Fullstack Starter

🐩 A boilerplate for Vue, Material, Express, Babel, Flow, and ReactiveX.

Getting Started
Project Template
Dockerization
Configuration
Directory Structure

Getting Started

Follow steps to execute this boilerplate.

Clone this Boilerplate

$ git clone --depth 1 https://github.com/Shyam-Chen/Vue-Fullstack-Starter <PROJECT_NAME>
$ cd <PROJECT_NAME>

Install Dependencies

$ yarn install

# install flow types
$ yarn typed

Run the code

# front-end
$ yarn start:app

# back-end
$ yarn start:api

Build the code

# front-end
$ yarn build:app

# back-end
$ yarn build:api

Check the code

# scripts
$ yarn lint:js

# styles
$ yarn lint:css

Run the test

# front-end
$ yarn test:app

# back-end
$ yarn test:api

Run the e2e

# ui
$ yarn e2e:app

# http
$ yarn e2e:api

Project Template

Generate a blank project via Vue CLI.

Install Vue CLI

$ yarn global add vue-cli

Create a project

$ vue init Shyam-Chen/Vue-Fullstack-Template <PROJECT_NAME>

Start your journey

$ cd <PROJECT_NAME>
$ yarn install && yarn typed
$ yarn start:app
$ yarn start:api

🚦 Project template repository can be accessed from here.

Dockerization

Dockerize an application.

Build and run the container in the background

$ docker-compose up -d <SERVICE>

Run a command in a running container

$ docker-compose exec <SERVICE> <COMMAND>

Remove the old container before creating the new one

$ docker-compose rm -fs

Restart up the container in the background

$ docker-compose up -d --build <SERVICE>

Push images to Docker Cloud

$ docker login
$ docker build -f tools/Dockerfile.<dev|prod> -t <IMAGE_NAME>:<IMAGE_TAG> .

# checkout
$ docker images

$ docker tag <IMAGE_NAME>:<IMAGE_TAG> <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
$ docker push <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>

# remove
$ docker rmi <IMAGE_ID>

Pull images from Docker Cloud

# docker-compose.yml

  <dev|prod>:
-   image: <dev|prod>
-   build:
-     context: .
-     dockerfile: tools/Dockerfile.<dev|prod>
+   image: <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
    volumes:
      - yarn:/home/node/.cache/yarn
    tty: true

Configuration

Project environments

Change to your project.

// .firebaserc
{
  "projects": {
    "development": "<PROJECT_NAME>",
    "production": "<PROJECT_NAME>"
  }
}

Default environments

Set your local environment variables. (use this.<ENV_NAME> = process.env.<ENV_NAME> || <LOCAL_ENV>;)

// env.js
function Environments() {
  this.NODE_ENV = process.env.NODE_ENV || 'development';

  this.PROJECT_NAME = process.env.PROJECT_NAME || '<PROJECT_NAME>';

  this.SITE_PORT = process.env.SITE_PORT || 8000;
  this.SITE_URL = process.env.SITE_URL || `http://localhost:${this.SITE_PORT}`;

  this.FUNC_PORT = process.env.FUNC_PORT || 5000;
  this.FUNC_URL = process.env.FUNC_URL || `http://localhost:${this.FUNC_PORT}/${this.PROJECT_NAME}/us-central1`;

  this.FIREBASE_CONFIG = process.env.FIREBASE_CONFIG || {
    apiKey: '<API_KEY>',
    authDomain: '<AUTH_DOMAIN>',
    databaseURL: '<DATABASE_URL>',
    projectId: '<PROJECT_ID>',
    storageBucket: '<STORAGE_BUCKET>',
    messagingSenderId: '<MESSAGING_SENDER_ID>',
  };

  this.GOOGLE_ANALYTICS = process.env.GOOGLE_ANALYTICS || 'UA-84381641-2';

  this.SENTRY_DSN = process.env.SENTRY_DSN || null;
  this.RENDERTRON_URL = process.env.RENDERTRON_URL || null;
}

Deployment environment

Set your deployment environment variables.

# tools/Dockerfile.<dev|prod>

# envs --
ENV SITE_URL <SITE_URL>
ENV FUNC_URL <FUNC_URL>

ENV SENTRY_DSN <SENTRY_DSN>
# -- envs

SEO friendly

Enable billing on your Firebase Platform and Google Cloud the project by switching to the Blaze plan.

Serve dynamic content for bots.

// firebase.json
    "rewrites": [
      {
        "source": "**",
-       "destination": "/index.html"
+       "function": "app"
      }
    ],

Deploy rendertron instance to Google App Engine.

$ git clone https://github.com/GoogleChrome/rendertron
$ cd rendertron
$ gcloud auth login
$ gcloud app deploy app.yaml --project <RENDERTRON_NAME>

Set your rendertron instance in deployment environment.

# tools/Dockerfile.<dev|prod>

# envs --
ENV RENDERTRON_URL <RENDERTRON_URL>
# -- envs

VS Code settings

{
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Material Theme",
  "workbench.iconTheme": "material-icon-theme",
  "eslint.validate": [
    "javascript", {
      "language": "vue"
    },
    "javascriptreact",
    "html"
  ],
  "javascript.validate.enable": false,
  "vetur.validation.script": false
}

Directory Structure

.
├── src
│   ├── api
│   │   ├── config  -> config middlewares
│   │   ├── graphql
│   │   │   └── <FEATURE>
│   │   │       ├── __tests__
│   │   │       │   └── ...
│   │   │       └── ...
│   │   ├── <FEATURE>
│   │   │   ├── __tests__
│   │   │   │   └── ...
│   │   │   └── ...
│   │   └── index.js
│   ├── app
│   │   ├── _languages  -> app languages
│   │   │   └── ...
│   │   ├── config  -> config plugins
│   │   │   └── ...
│   │   ├── <FEATURE>
│   │   │   ├── __tests__
│   │   │   │   ├── actions.spec.js
│   │   │   │   ├── <FEATURE>.e2e-spec.js
│   │   │   │   ├── <FEATURE>.spec.js
│   │   │   │   ├── getters.spec.js
│   │   │   │   └── mutations.spec.js
│   │   │   ├── _languages  -> <FEATURE> languages
│   │   │   │   └── ...
│   │   │   ├── actions.js
│   │   │   ├── constants.js
│   │   │   ├── <FEATURE>.vue
│   │   │   ├── getters.js
│   │   │   ├── mutations.js
│   │   │   └── types.js
│   │   ├── actions.js  -> root actions
│   │   ├── App.vue  -> app root
│   │   ├── constants.js  -> root constants
│   │   ├── getters.js  -> root getters
│   │   ├── mutations.js  -> root mutations
│   │   └── types.js  -> root types
│   ├── assets  -> datas, fonts, images, medias, styles
│   ├── client.js
│   ├── index.html
│   └── server.js
├── tools
│   └── ...
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .firebaserc
├── .flowconfig
├── .gitignore
├── .postcssrc
├── .stylelintrc
├── Dockerfile
├── LICENSE
├── README.md
├── circle.yml
├── docker-compose.yml
├── env.js
├── firebase.json
├── gulpfile.js
├── jest.config.js
├── package.json
├── webpack.config.js
└── yarn.lock

tja0112 / vue-fullstack-starter Goto Github PK