How to add JavaScript pages to React Core Boilerplate template?

If you use a Visual Studio template that comes with TypeScript by default, you may need to extend the capability of it to use JavaScript. In this post, we will learn how to add JavaScript pages to React Core Boilerplate template.

React is a JavaScript library that is developed by Facebook and used by developers to create interactive user interfaces. It updates and render only the specific components on your page when the data changes.

React Core Boilerplate is a Visual Studio template that helps developers to easily embed and use React in their web applications.

Add JavaScript pages to React Core Boilerplate template

React Core Boilerplate template automatically creates TypeScript files (.tsx extension) for application logic. Therefore, you need to put some extra effort to enable this template to render JavaScript files.

Add Javascript files to React Core Boilerplate template
How a JavaScript page looks in Visual Studio’s React Core Boilerplate

Follow the steps below to add JavaScript files to React Core Boilerplate template:

  • Right click “pages” folder. Select “Add > New Item
  • Search for “JavaScript File” template. Name it as “Home.js
Add JavaScript files to React Core Boilerplate template
  • Add JS content to “Home.js”. Example: 
import React, { Component } from 'react';
 
export default class Home extends Component {
    render() {
        return (
            

Hello, world! (JS Page)

Welcome to your new single-page application

); } }
  • Open “routes.tsx” in “ClientApp” folder. Add the following 2 lines
import Home from '@Pages/Home.js';
...

;
  • Open “webpack.config.js” file in the root folder. Replace the code with the following block (We are adding a line to tell compiler to render js files with babel-loader
module: {
	rules: [
		{ test: /\.tsx?$/, include: /ClientApp/, use: ['babel-loader', 'ts-loader', 'ts-nameof-loader'] },
		{
			test: /\.(gif|png|jpe?g|svg)$/i,
			use: [
				'file-loader',
				{
					loader: 'image-webpack-loader'
				}
			]
		}, 
		{ test: /\.js?$/, include: /ClientApp/, use: ['babel-loader'] }
	]
},
  • Run these commands in Command Prompt of the project root folder: 
npm install @babel/preset-env
npm install @babel/preset-react
  • Right click the project name. Select “Add > New Item
  • Search for “Text File” template. Name it as “.babelrc” 
Add JavaScript files to React Core Boilerplate template
  • Enter this content into “.babelrc” 
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
  • Run npm run build:dev in Command Prompt. There shouldn’t be any errors or warnings in the output. If there is, they should be fixed before proceeding with the next step 
Add JavaScript files to React Core Boilerplate template

Looking for steps to publish ASP.NET web site in Visual Studio and deploy it in IIS? Check this post out.

References

“The following Web projects must be converted to the new Web Site format” (Solved)

Converting your web project to a newer version of Visual Studio may result in this error when you try to open it after the migration: “The following Web projects must be converted to the new Web Site format”.

Here is the full error message:

The following Web projects must be converted to the new Web Site format. The conversion process will remove all source control bindings and the project will not be under source control after migration.

"The following Web projects must be converted" error
“The following Web projects must be converted” error

It may be followed by the message below.

Some of the properties associated with the solution could not be read.

The root cause of the problem is that the old Visual Studio project was migrated to “Web Application Project (WAP)” format while it was still bound to TFS. Presumably (not tested), this error shouldn’t have occurred if it was migrated to “Website Project” after unbinding from TFS.

Looking for a solution to fix “Declaration expected”, “Syntax error”, and “Statement cannot appear outside of a method” errors in Visual Studio? Check this post out.

Solution for “”The following Web projects must be converted to the new Web Site format” error

There a few approaches to take to solve this issue.

Approach 1:

  • Open vspscc file (Project_Name.csproj.vspscc)  
  • Change ENLISTMENT_CHOICE to NEVER
  • Remove the value of ORIGINAL_PROJECT_FILE_PATH parameter

After the changes, it should look like this:

{
  "ENLISTMENT_CHOICE" = "NEVER"
  "ORIGINAL_PROJECT_FILE_PATH" = ""
}

After changing vspscc file, open your solution file (name.sln). Remove the line that has this parameter: SccProjectEnlistmentChoice.

Credits

Approach 2

  • Remove all vspscc files. TFS is supposed to re-generate these files with correct settings
  • Open your solution file (name.sln). Remove the lines that has this parameter: SccProjectEnlistmentChoice 

Credits

Approach 3

This approach may take more time but it’s a good opportunity for a clean start. It may actually save time if the first 2 approaches don’t solve the problem for some reason.

  • Create a brand-new solution file with the new version of Visual Studio
  • Copy your code manually to this solution
  • Bind it to TFS

Additional Approaches

In this post, author suggests removing all GlobalSection blocks in the solution file except the one your project (the project that causes the error) uses. Then it recommends performing the steps I explained in the Approach 1 above.

In this Microsoft article, author suggests changing SCCServerPath value from relative path to absolute path in registry. This solution is specifically for the second error message in the beginning of this post (“Some of the properties associated with the solution could not be read”).

Difference between Mainstream Support and Extended Support

One of the questions asked most about Microsoft’s licensing policy is the scope of Extended Support. What does it mean and how long does it last? Who can leverage it?

Microsoft provides 5 years of support for almost all software products including operating systems such as Windows and Windows Server. It also covers development and database tools such as Visual Studio and SQL Server. This initial support period is called Mainstream Support. All security updates, new feature developments, and complimentary support are provided during Mainstream Support. For the end of support dates for Windows Server, check this post out.

Microsoft Extended Support

After the 5-year mainstream support, a new period called Extended Support starts. During the extended support, Microsoft still provides all security updates. However, unlike mainstream support, product design change or new feature addition requests are not accepted and complimentary support is not provided.

Difference between Mainstream and Extended Support

The table below shows the details of support types (Courtesy of Microsoft).

 Type of support Mainstream Support Extended Support
Request to change product design and features  Available  Not available
Security updates  Available  Available
Non-security updates  Available
  • Available only with Extended Hotfix Support
  • Not available for desktop operating system consumer products
Complimentary support1included with license, licensing program2 or other no-charge support programs  Available  Not available3
Paid-support (including pay-per-incident premier and essential support)  Available  Available

1 Refers to phone and online support options.
2 For example, support incidents acquired through the Software Assurance program for server products.
3 Limited complimentary support may be available (varies by product).

For detailed information, please visit Microsoft’s Product Life Cycle Policy page.

As a summary, the in Extended support:

  • No new features are added
  • Complimentary support is not available
  • Non-security fixes are available only if Extended Hotfix Support is purchased
  • Security fixes are available just like Mainstream Support