introduce

This is an example of a rapidly developed template based on the Vue SSR Genesis framework

Start the

# NPM run dev # NPM run build # NPM run startCopy the code

About the Genesis

This is a Vue SSR framework for Followme 5.0, maybe we will open source after launch, maybe 🔥?

The directory structure of the project

App. vue page entry

<template>
    <div class="app">
        <h2>Vue SSR for Genesis</h2>
        <ol class="list">
            <li class="list-item">{{title}}</li>
            <li class="list-item">Service name: {{name}}</li>
            <li class="list-item">Render address: {{url}}</li>
            <li class="list-item">Official website:<a rel="noopener noreferrer" target="_blank" href="https://www.followme.com/">www.followme.com</a></li>
        </ol>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component<App>({})
export default class App extends Vue {
    @Prop({
        type: String.required: true}) public name! : string; @Prop({type: String.required: true}) public title! : string; @Prop({type: String.required: true}) public url! : string; }</script>
Copy the code

SRC /entry-client.ts Indicates the client entry file


import App from './app.vue';

const data = window[process.env.GENESIS_NAME!] ;export default newApp({ propsData: { name: data.name, title: data.state.. title, url: data.url } });Copy the code

SRC /entry-server.ts Indicates the server entry file

import { GenesisTypes } from '@fmfe/genesis-core';
import App from './app.vue';

export default (ctx: GenesisTypes.RenderContext) => {
    ctx.data.state.title = 'vue-genesis-templace';
    return new App({
        propsData: {
            name: ctx.data.name,
            title: ctx.data.state.title,
            url: ctx.data.url
        }
    });
};
Copy the code

Genesis. Ts Creates an SSR instance

import { Genesis } from '@fmfe/genesis-core';

export const ssr = new Genesis({});

Copy the code

Genesis. Build. Ts source code compiled

import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = () => {
    return new Build(ssr).start();
};
export default start();

Copy the code

Genesis dev. Ts development mode

import { DevServer } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = () => {
    return new DevServer(ssr).start();
};
export default start();

Copy the code

Genesis. Prod. Ts production environment

import express from 'express';
import { Renderer } from '@fmfe/genesis-core';
import { ssr } from './genesis';

const start = async() = > {const app = express();
    const renderer = new Renderer(ssr);
    app.use(renderer.staticPublicPath, express.static(renderer.staticDir, {
        immutable: true,
        maxAge: '31536000000'
    }));
    app.use(renderer.renderMiddleware);
    app.listen(ssr.port, (a)= > console.log(`http://localhost:${ssr.port}`));
};
start();

Copy the code

Complete requirements architecture diagram

The last show

Followme is an extremely complex large sites, it is almost a front-end can meet all the problems, we plan to through the research of Genesis framework to achieve the purpose of the front-end SSR micro application, solve because public component library update, lead to all projects need to send version of the problem, and can truly no refresh the jump page

2020

Genesis: hello! If you are also ❤️😍, turn right to the portal vue-Genes-Templace