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

Alexa blinks yellow light ring

Alexa blinks yellow light ring. What does it mean?

Amazon’s voice assistant Alexa blinks yellow light ring when she needs your attention! In other words, there is something she wants to tell you.

Note: The ring may look green in the pictures but it is actually yellow and it is blinking (pulsing)!

There are 8 different colors Echo devices may display: blue, red, orange, yellow, purple, green, white, violet. Device may pulse or show these colors solid. Sometimes they just flash. Each color and action have a different meaning.  It is important to know their meanings to use your voice assistant efficiently.

Are you receiving “I am having trouble connecting to the internet. Take a look at the help section in your Alexa app” message? Check this post out.

Why does Alexa blinks yellow light ring?

When there are some messages or notifications for you, Alexa blinks yellow light ring and it also chimes to alert you. It could be an incoming message or it could be a comment to your question on a product at Amazon.com.

Click to watch the video:
What does yellow light mean?

In order to hear what the message or notification is about, say “Alexa, read my notifications” or “Alexa, play my messages”.

Are you receiving “Sorry, I’m having trouble understanding you right now. Please try a little later” message? Check this post out.

Alexa blinks yellow light ring
Pulsing yellow. You have a message!

Here is what Amazon says about the pulsing yellow light:

Alexa delivers messages to the recipient’s Alexa app as well as to all of their supported Echo devices associated with their Amazon account. When there is an incoming message, lights on supported Echo devices pulse yellow, and the devices chime.

Alexa Messaging

How about red, blue, green lights?

Wondering what other colors Echo devices display mean? Here is a list of colors and their meanings for Alexa.

Would you like to improve Echo’s sound quality? Check this post to learn how to connect more than one Bluetooth speakers to Echo Dot.


“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”).