@@ -115,21 +115,28 @@ class ReactWebView {
115115}
116116
117117private render = async ( ) :Promise < void > => {
118-
118+ // path to build directory
119119const rootPath = path . join ( this . extensionPath , 'build' )
120+
121+ // load copied index.html from web app build
120122const dom = await JSDOM . fromFile ( path . join ( rootPath , 'index.html' ) )
121123const { document} = dom . window
122124
125+ // set base href
123126const base :HTMLBaseElement = document . createElement ( 'base' )
124127base . href = vscode . Uri . file ( rootPath ) . with ( { scheme :'vscode-resource' } ) . toString ( ) + '/'
125128document . head . appendChild ( base )
126129
127- const manifest = require ( path . join ( rootPath , 'asset-manifest.json' ) )
128-
130+ // used for CSP
129131const nonces :string [ ] = [ ]
130132
131- const createUri = ( filePath :string ) :string => vscode . Uri . file ( filePath ) . with ( { scheme :'vscode-resource' } ) . toString ( ) . replace ( / ^ \/ + / g, '' ) . replace ( '/vscode-resource%3A' , rootPath )
133+ // generate vscode-resource build path uri
134+ const createUri = ( filePath :string ) :string =>
135+ vscode . Uri . file ( filePath ) . with ( { scheme :'vscode-resource' } ) . toString ( )
136+ . replace ( / ^ \/ + / g, '' ) // remove leading '/'
137+ . replace ( '/vscode-resource%3A' , rootPath ) // replace mangled resource path with root
132138
139+ // fix paths for scripts
133140const scripts :HTMLScriptElement [ ] = Array . from ( document . getElementsByTagName ( 'script' ) )
134141for ( const script of scripts ) {
135142if ( script . src ) {
@@ -144,10 +151,11 @@ class ReactWebView {
144151const runTimeScript = document . createElement ( 'script' )
145152runTimeScript . nonce = getNonce ( )
146153nonces . push ( runTimeScript . nonce )
154+ const manifest = require ( path . join ( rootPath , 'asset-manifest.json' ) )
147155runTimeScript . src = createUri ( path . join ( rootPath , manifest . files [ 'runtime-main.js' ] ) )
148-
149156document . body . appendChild ( runTimeScript )
150157
158+ // fix paths for links
151159const styles :HTMLLinkElement [ ] = Array . from ( document . getElementsByTagName ( 'link' ) )
152160for ( const style of styles ) {
153161if ( style . href ) {
@@ -156,7 +164,7 @@ class ReactWebView {
156164}
157165
158166
159- // content security policy
167+ //set CSP ( content security policy) to grant permission to local files
160168const cspMeta :HTMLMetaElement = document . createElement ( 'meta' )
161169cspMeta . httpEquiv = 'Content-Security-Policy'
162170cspMeta . content = [
@@ -168,8 +176,10 @@ class ReactWebView {
168176] . join ( ' ' )
169177document . head . appendChild ( cspMeta )
170178
179+ // stringify dom
171180const html = dom . serialize ( )
172181
182+ // set view
173183this . panel . webview . html = html
174184}
175185