Welcome to the world of React development! If you’re looking to jumpstart your journey into building universalisomorphic web applications using React and ASP.NET Core, you’re in the right place. In this blog, we’ll guide you through the setup process of the React Core Boilerplate, help you understand its features, and troubleshoot common issues you might encounter along the way.

Installation Steps

Setting up your development environment has never been easier. Follow these straightforward steps:

1. Install the latest .NET Core SDK and Runtime from here.
2. Install the latest stable Node.js.
3. Before running your project, ensure that it’s closed in Visual Studio or any other IDE. Open your project folder in the console and execute:

npm install

4. To compile your main and vendor bundle for development, run:

npm run build:dev

5. If you are using Visual Studio 20xx, select your project name or ReactCoreBoilerplate instead of IIS Express by clicking on the down arrow near IIS Express.
6. Build and run the project; it will start in the Windows Console.

Using Docker

To run your project using Docker, follow these steps:

1. Select the Docker option in the toolbar of Visual Studio 20xx.
2. To build a container, execute:

docker build -t [my image name] .

3. For running a production container on Windows with HTTPS support, follow these steps:
• Trust the ASP.NET Core HTTPS development certificate:

dotnet dev-certs https -ep %USERPROFILE%.aspnethttpsaspnetapp.pfx -p [my password]

• Trust the certificate:

dotnet dev-certs https --trust

• Build your container.
• Run the container with the following command:

docker run --rm -it -p 7000:7000 -p 7001:7001 -e ASPNETCORE_URLS=https:+;http:+ -e ASPNETCORE_Kestrel__Certificates__Default__Password=[my password] -e ASPNETCORE_Kestrel__Certificates__Default__Path=httpsaspnetapp.pfx -v %USERPROFILE%.aspnethttps:https [my image name]

Understanding the Code Structure

The React Core Boilerplate is like building a house with predefined blueprints. Each line of code corresponds to features, just as walls, doors, and windows make up the structure of a house. Here’s an analogy to help you grasp how the code integrates:

• Think of React as the very foundation of your house, providing stability and structure.
• Redux acts like the internal plumbing, managing the flow and storage of your data effectively.
• Then we have Webpack which serves as the construction manager, bundling all your materials (modules) into a cohesive unit that’s ready for deployment.
• Finally, ASP.NET Core functions as the outer shell of the house, providing all the external connections and ensuring everything runs smoothly.

Troubleshooting Common Issues

Even seasoned developers face hurdles. Here are some common problems you may encounter:

• ERROR in .ClientApp/styles/loaders/xxx.scss: This indicates a missing file. To troubleshoot, run the following commands:

npm i

npm rebuild node-sass

• WebPack Hot Module Replacement (HMR) not functioning with IIS: Switch to using Kestrel for development.
• HTTP Error 500: Ensure you have the latest version of Node.js installed.
• HTTP Error 502.5: Install the latest ASP.NET Core SDK and Runtime using this link: here.
• HTTP error 500 when hosted in Azure: Set the WEBSITE_NODE_DEFAULT_VERSION to 6.11.2 in Azure app settings.
• If you encounter issues when running in development after publishing, run:

npm run build:dev

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.