UseExistingProject.adoc

Using an Existing Project With the Crownpeak PWA Template

This chapter covers the basic steps that are required to use your existing FirstSpirit project with the Crownpeak PWA Template.

Configure CaaS and Navigation Service

Use the ServerManager to install two Project components for your project, if they are not installed yet:

• CaaS Connect Project App

• Navigation Project Configuration

We recommend to activating the "CaaS Mode" in the Navigation Project Configuration. If you use different URL Factories, we cannot guarantee that the FSXA-API can handle it properly.

Clone and Configure PWA

Get the Crownpeak PWA Template from github.

Import scripts for switching OCM to local environment

If you have the PWA Smart Living Global FirstSpirit project, you find the scripts there under Scripts/CaaS-Zero.

Here are the script’s parts:

properties / display logic

connection = context.userService.connection;
return connection.user.isProjectAdmin(connection.project);

form

<CMS_MODULE>

  <CMS_LABEL>
    <LANGINFOS>
      <LANGINFO lang="*" label="With this action you can change the URL of the embedded application."/>
      <LANGINFO lang="DE" label="Hiermit können Sie die URL der eingebetteten Applikation ändern."/>
    </LANGINFOS>
  </CMS_LABEL>

  <CMS_LABEL>
    <LANGINFOS>
      <LANGINFO lang="*" label="(only for demonstation purposes)"/>
      <LANGINFO lang="DE" label="(nur für Demozwecke)"/>
    </LANGINFOS>
  </CMS_LABEL>

  <CMS_INPUT_TEXT name="url" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="App URL (full qualified)"/>
      <LANGINFO lang="DE" label="URL der Applikation (voll qualifiziert)"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

</CMS_MODULE>

rules

<RULES>
	<RULE>
		<WITH>
			<OR>
				<MATCHES regex="(^http[s]?://.*)|(^$)">
					<PROPERTY name="VALUE" source="url"/>
				</MATCHES>
			</OR>
		</WITH>
		<DO>
			<VALIDATION scope="SAVE">
				<PROPERTY name="VALID" source="url"/>
				<MESSAGE lang="*" text="URL must start with 'http://' or 'https://'"/>
				<MESSAGE lang="*" text="URL muss mit 'http://' oder 'https://' beginnen"/>
			</VALIDATION>
		</DO>
	</RULE>
</RULES>

===

import de.espirit.firstspirit.agency.OperationAgent;
import de.espirit.firstspirit.ui.operations.RequestOperation;

project = context.project;

defaults = context.getScript().getFormDefaults();
defaults.get(null, "url").set(project.getWebeditPreviewUrl());

formData = context.showForm(false);

if (formData == null) {
    return null;
}

url = formData.get(null, "url").get();

project.lock();
try {
    project.setWebeditPreviewUrl(url);
    project.save();
} finally {
    project.unlock();
}

message = context.requireSpecialist(OperationAgent.TYPE).getOperation(RequestOperation.TYPE);
message.setTitle("Success");
message.setKind(RequestOperation.Kind.INFO);
message.perform("App URL set to\n\n\t" + url + "\n\nPlease reload page now...");

With this script you can switch the OCM URL to localhost:3000 from ContentCreator, once you have your PWA running locally under that address.

Get configuration values for .env file

See chapter Configuration.

URLs for CaaS and Navigation Service can be retrieved from the Server Manager, from the two respective project components (see above).

The Configuration chapter also describes how to get the Project ID.

The NUXT_PRIVATE_TENANT_ID is your company name as used in the first element of our .e-spirit.hosting addresses. If you access FirstSpirit under company_x.e-spirit.hosting, your Tenant ID should be company_x.

Configure PWA

The documentation chapter Configuration also describes some other settings you can apply to your PWA (defaultLocale, logLevel, …​)

Enable devmode

See chapter DevMode.

Start implementing vue templates.

Your project will probably have sections that are not supported by the default PWA. Now you can start implementing vue components for them.

See chapter SFC-Components.