Build your website locally

Oslo is a responsive, sample website that illustrates what you can create by using Acoustic Content. You can use the sample site as a starting point for customizing your own website. The Oslo sample site is built from a preinstalled collection of content types, content, assets, image profiles, and categories. The site is also mapped to a set of templates and layouts that are maintained by your developer. As a developer, you can modify these items to create your own website. Get started by setting up your development environment.

Before you begin

The Content trial and standard editions include features that help you create websites, and includes a sample website that is created and stored in Content. To get a free trial version or to upgrade to the standard edition, go to Acoustic Content.

Benefits of working in your local environment

Before you can start to customize the sample website or create your own layouts and components for your website, you must set up your local development environment. There are several benefits in setting up a local development environment.

• When you work in the local environment, any changes you make to the code do not affect or disrupt the live site or the changes that are made by other team members.
• When you work locally you can test, and debug your code changes more easily. The changes are effective and are reflected immediately in your localhost rather than waiting to push and deploy the changes to the live Content site for every change you might make.

Install the source application files

The OSLO sample site source files are required to make any customization. You can download the source application files from Acoustic Content Site application.

To work with the source files, you must have Node.js version 6 or greater installed.

Complete the following steps to install the source application files in your local environment.

1. Add the following to your trusted domains in Admin > Settings > Security in Content UI. http://localhost:4200
2. Download/clone the Oslo source application files to your local environment. Git clone https://github.com/acoustic-content-samples/wch-site-application.
3. cd wch -site-application
4. Edit the src/app/Constants.ts file and set DOMAIN_NAME and CONTENT_HUB_ID for your hub.
5. Run the following command to install the source application files.
   npm install
   The command can take several minutes to complete.
6. Then, run the following command to see the application in your localhost. npm start
7. Open http:// localhost:4200 in a browser.

Manage your source code

Store the customized site application source files in a code management system such as GitHub.

📘

Note:

When you work with multiple developers, you must update the managed source frequently to avoid conflicts with shared files. For example, when you generate a layout it updates a shared file where all layout components are registered.

When Content updates the site application source on GitHub, you can decide whether you want to get the updates. If you get the updates, you must merge your source additions/changes with the new source.

Develop with source files

Work with the source files to customize your site. When you save a source file with changes, the test server is automatically reloaded in the browser.

1. Open the wch-site-application folder in an editor of your choice to edit the files.

• The dist folder is generated by the build process and contains the optimized application and resources.
• The src folder contains the site application source, including all layouts, components, styles, and JS.

2. To work with the provided layouts and styles, edit the HTML and the JS files. The JS files for layouts are in the folder src/app/layouts.
3. To modify the CSS styles, each layout has a .scss file for component styles that you can edit.
4. To modify the global styles, edit the src /app/app.scss and the src/app/_settings.scss files.
5. You can use Sass features such as variables, import, and many others that simplify style management. For example, try making a simple change to the header template. Change the background color by editing the color code in the \src\app\wchHeader\wch-footer.scss file.

Use the wchtools to upload (push) and download (pull) pages, content, assets, and content model artifacts between your local environment and Content.

Testing your code changes locally

When you make code changes to the source files, you can preview and test the changes locally before you publish them to the site.

From your project folder, run the following command npm start.

The site application runs on your localhost at http://localhost:4200/. The changes that you make to the code are automatically updated on the local site.

For more information about performing unit tests and end to end tests, see Test your customizations.

Publish your code changes to your site

The source files and the changes you made to the code are stored locally in your development environment and are not added to your website in Content. Therefore, the preview in the Content UI does not reflect the code changes you made until you deploy the code.

To deploy your changes to Content, complete the following steps.

1. Run the following command to build your new site npm run build.
2. Run the following command to deploy your updated local site to the remote site npm run deploy.

📘

Note:

You must reenter your Content password for you to successfully run the commands.

Customize the site application

Now that you have your local environment set up, you can start to customize the sample Oslo site. The sample OSLO site can be customized to make it your own. Replacing the content in the existing pages and creating pages with the provided page types and layout templates is just the start. To completely make the site your own, you must create your own content/page types; define the elements in the content type; then, reference the elements to create layouts and map them together. You can also create components and map them to the layout. You can also map several layouts to a single content type to have a much more flexible website page. To completely make the website your own, you can remove the sample OSLO pages.