How to use a lightning web components(LWC) inside an aura component

It is very easy to embed lightning web components(lwc) inside aura components. But remember that you cannot insert an aura component inside an LWC component.

Use cases

• You can use this approach to migrate/modernize your big aura applications to LWC step by step. Suppose there is a big aura application that has four big aura sub components. We can migrate the application to LWC framework, by migrating one of these four aura components to LWC at a time.

	<template>
	This text is in LWC component which contains a dynamic variable with value <b>{testVariable}</b>
	</template>

view raw childLWCComponent.html hosted with ❤ by GitHub

	import { LightningElement, track } from 'lwc';
	export default class ChildLWCComponent extends LightningElement {
	@track testVariable = 'Hi from JavaScript';
	}

view raw childLWCComponent.js hosted with ❤ by GitHub

	<aura:application extends="force:slds">
	<!-- To see the result easily, we are using an aura application instead of aura component.
	But the syntax is the same-->
	<c:childLWCComponent></c:childLWCComponent>
	</aura:application>

view raw TestApp.app hosted with ❤ by GitHub

Explanation

Here we are creating an LWC component with name "childLWCComponent". We display data from a javascript variable in controller with name "testVariable" in the UI. To embed we are using an aura application with name TestApp. In order to embed "childLWCComponent" LWC component in aura app, you can just use the syntax "<c:childLWCComponent></c:childLWCComponent>"

How to use

• Create an LWC component with name childLWCComponent
• Copy content from above code to childLWCComponent component. childLWCComponent.html is the HTML file and childLWCComponent.js is the Javascript file
• Create an aura app with name "Testapp.app"
• Copy content from above code sample to Testapp.app file
• Navigate to "yourOrgBaseUrl/c/TestApp.app" to see the result