UseExistingProject.adoc

Using an Existing Project With the FSXA PWA

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

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 activate the "CaaS Modus" in the Navigation Project Configuration. If you use different URLs Factories, we cannot guarantee that the navigation component inside the fsxa-stack can handle it properly.

Clone and Configure PWA

Get the FSXA-PWA 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 simply 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 FSXA_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.