DOCS
Login

Building a template

Templates can currently be built by using any modern javascript based framework (React, Next, Vue, Angular etc.).

React

If you couldn't be bothered reading, check out the React starter template, fork it and get cracking.


1. Create your project
npx create-react-app my-template-name
cd my-template-name
yarn start

2. Consume the templateProps

Inside the Make request a custom data object can be sent to the template. To consume this object successfully you need to spread window.templateProps onto your top level <App />

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
  <React.StrictMode>
    <App {...window.templateProps} />
  </React.StrictMode>,
  document.getElementById("root")
);

These can then be destructured in the <App /> component and used however you want. Prop type validation and defaultProp values can be setup.

// App.js
import PropTypes from "prop-types";
function App({ headline, otherInputs }) {
  return (
    <div className="App">
      <h1>{headline}</h1>
    </div>
  );
}
App.propTypes = {
  headline: PropTypes.string,
}
App.defaultProps = {
  headline: 'Hello World',
}
export default App;

3. Update the build settings

There are a two changes that need to be made for a seamless import into Make.

In the package.json you need to specify that the homepage to your site is ./. This will then allow for relative asset linking once the repo has built.

// package.json
{
  ...
  "homepage": "./",
}

As we need the built version of the repository you will need to remove the /build folder in the .gitignore

// .gitignore
# production
/build <-- remove

4. Build & host your application
yarn build

After successfully building your application, push it to Github.

The build artifacts will be stored in the /build directory.


Vue

If you couldn't be bothered reading, check out the Vue starter template, fork it and get cracking.

1. Create your project
vue create my-template-name
cd my-template-name
yarn serve

Remember to have the Vue CLI installed globally on your machine prior to running the above with the following.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. Consume the templateProps
npx create-react-app my-template-name
cd my-template-name
yarn start

2. Consume the templateProps

Inside the Make request a custom data object can be sent to the template. To consume this object successfully you need to create a mixin to accept the window.templateProps that are sent to the template on request and be able to access them in our app.

Optionally we can also add an operation to provide default data in the case of an empty return.

// App.vue
<template>
  <div id="app"></div>
</template>
<script>
  const makeTemplateMixin = {
    computed: {
      makeTemplateProps() {
        return window.templateProps || {
          headline: "Hello World",
          backgroundImage: '',
        };
      }
    }
  }
  export default {
    name: 'App',
    components: {},
    mixins: [makeTemplateMixin]
  }
</script>

These can then be used inside the Vue template.

// App.vue
<template>
  <div
    id="app"
    v-bind:style="{ backgroundImage: 'url(' + makeTemplateProps.backgroundImage + ')' }"
  >
    <h1>{{ makeTemplateProps.headline }}</h1>
  </div>
</template>

3. Update the build settings

The only additional changes that needs to be made is to let Webpack know that on build we want all files to be linked using relative paths.

To do this add a vue.config.js file iun the root of your repository with the following.

// vue.config.js
module.exports = {
    publicPath: '',
};

Finally, in the .gitignore we want to remove the /dist folder, as we want to be able to import that to Make.

// .gitignore
.DS_Store
node_modules
/dist <-- remove

4. Build & host your application
yarn build

After successfully building your application, push it to Github.

The build artifacts will be stored in the /dist directory.



Angular

If you couldn't be bothered reading, check out the Angular starter template, fork it and get cracking.

1. Create your project
ng new my-template-name
cd my-template-name
ng serve

Remember to have the Angular CLI installed globally on your machine prior to running the above with the following.

npm install -g @angular/cli

2. Consume the templateProps

Inside the Make request a custom data object can be sent to the template.

To consume the object successfully you need to create a function to access them and then use an @Injectable to pass them to the App component.

To do this first create a /lib folder inside the /src directory.

Secondly, create a file called MakeTemplatePropsRef.ts and paste the following code.

// src/lib/MakeTemplatePropsRef.ts
import { Injectable } from '@angular/core';
function _templateProps() : any {
   // return the global native browser window object
   return window['templateProps'] || {
      headline: 'Hello World',
      backgroundImage: '',
      showLogos: true,
   };
}
@Injectable()
export class MakeTemplatePropsRef {
   get makeTemplateProps() : any {
      return _templateProps();
   }
}

Then inside your app.component.ts file in the /src/app directory you can import MakeTemplatePropsRef and then assign variables the templateProps.

import { Component } from '@angular/core';
import { MakeTemplatePropsRef } from 'src/lib/MakeTemplatePropsRef';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  headline = '';
  backgroundImage = '';
  constructor(private makeTemplatePropsRef: MakeTemplatePropsRef) {
    this.headline = makeTemplatePropsRef.makeTemplateProps.headline;
    this.backgroundImage = makeTemplatePropsRef.makeTemplateProps.backgroundImage;
  }
  title = 'make-hello-ng-template';
}

Once that is done your data inputs can be accessed via the app.component.html as template variables, like the following.

// app.component.html
<div
  class="App"
  style="background-image: url('{{ backgroundImage }}')"
>
  <h1>{{ headline }}</h1>
</div>

3. Update the build settings

To allow for a smooth importing into Make, two things needs to be updated prior to building.

In the src/polyfill.ts file at the bottom add the following code. It will allow proper access to the window object when grabbing the templateProps.

// polyfill.ts
...
(window as any).global = window;

Update the .gitignore to push built files to your repository by removing the /dist line.

// .gitignore
/dist <-- remove
/template
/out-tsc

4. Build & host your application
ng build --base-href . --outputPath=dist

After successfully building your application, push it to Github.

The build artifacts will be stored in the /dist directory.


Previous

Guides

Next

Importing a template