Eveplate

Getting Started

Getting Started and Development with Eveplate

As a first step, you should have a directory of your app so you can scaffold Devery boilerplate

mkdir my-devery-app && cd "$_"

You can run our generator

npx -p yo -p @devery/generator-eveplate -c 'yo @devery/eveplate'

Or you can do it manually by installing the framework by:

npm install --global yo @devery/generator-eveplate

And then just run:

yo @devery/eveplate

In our examples, we used NPM as a default tool but you can use yarn for package management and running tasks. In this case all commands will start by yarn instead of npm run

To start developing, just run:

npm run start

To make a production-ready build of the app, run:

npm run build

Deploying an eveplate application

Running the npm run build task generates an optimized version of your application in the dist directory. There are multiple ways to deploy this code to production. Follow the steps below to run it with Docker:

Before you start, ensure you have Docker. If not yet, download from Docker

nginx is an HTTP, reverse proxy server and a generic TCP/UDP proxy server. It will serve your app inside Docker container.

nginx.conf

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

Dockerfile

# build environment
FROM node:10.16.1-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install --silent
COPY . /app
RUN npm run build

# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services.

docker-compose.yml

version: '3.7'

services:
  prod:
    container_name: prod
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '80:80'

For building and to serve your application you can run this command and open your preferred browser on localhost or if you want to run it on Heroku you can follow this instructions

docker-compose -f docker-compose-prod.yml up -d --build

If you want to run your app on any other VPS service which supports Docker images and deploys it.

FAQ

Add X technology/framework/tool?

There are a lot of tools which app can use: pure.js, Ember, Underscore, Lodash, etc. We don't believe there is a single right choice, as it depends on the situation and desired complexity, so we chose not to have built-in solutions. However, we will support and accept the pull request to create or update recipes for implementing many of them, so you can use them as references.

Browser support

You can configure browser support for @babel/preset-env by modifying the browserslist configuration, which in this case is the browserslist field in your package.json.

Linting

We doesn't use ESLint or TSLint orPrettier by default. We don’t believe there is a single right choice, and therefore we reserve the right for the user to choose a code verification tool from a large number.

Serve

By default we use webpack-dev-server. It provides you with a simple web server and the ability to use live reloading. Using webpack 4 we provide a wide range of options for customizing your application

Development with Eveplate