Skip to main content

PUBLISH your Angular App on Netlify Manually!

 There are so many options available on the internet when it comes to deploying your Angular app, but one of my recent favorites is Netlify.  Netlify offers you to deploy your app manually and also from GitHub. Here's a step-by-step guide on how to deploy your website on Netlify: Step 1: Build Your Project Go to your project directory and run the build command: ng build or ng build --configuration=production Step 2: Add Netlify Configuration Go to build/your-project-app/browser and add a file netlify.toml with the following configuration: [[redirects]] from="/*" to="/index.html" status=200 This file redirects all routes to your index.html file. Step 3: Deploy on Netlify Login or sign up to your Netlify account and click on "Add new site" then select "Deploy manually." Step 4: Upload Your Files Drag and drop the browser folder to Netlify. Victory!!! Your Angular App is deployed.
Post a Comment

Making a search filter that filters through multiple values in ReactJS

MULTIPLE VALUE SEARCH FILTER



In this blog, You will learn to make a search filter that filters through multiple values using ReactJS.


Step 1:- In this tutorial blog we have created an App.js file. Create a Dummy data named "DATA" and passed it as props in our Filter Component.
 
Step 2:- Next create a Filter.js file for Filter Component and create an Input for Search. The Input gets its value from 'getDisplayedOption' function, and the change is handled by the handleInputChange function, clickHandler function set the state to show the list.




Step 3:- we will now write a function to filter query search for multiple values. We will use the useEffect hook that will set the filtered results every time searchTerm and data changes. Here we are first converting the search input into a lowercase string and removing the spaces then filtering through the data that matches our input value then setting the state of the filteredData at the end.


Step 4:- Then set the value of the input to the option clicked.


Source code:- Search Filter

Also Find me on:-

LinkedIn | Youtube | Instagram
Labels:

Comments

Post a Comment

Popular posts from this blog

Hiding Secrets in dotnet API.

In this tutorial, we will learn how to hide API secrets in .NET. To hide secrets from being exposed first in your CLI execute the following command:- Run the following command from the directory in which the project file exists: dotnet user-secrets init Then write the following code in the console to create secret data: dotnet user-secrets set "Movies:ServiceApiKey" "12345" To remove the secret key you can use the following command: dotnet user-secrets remove "Movies:ConnectionString" To list secret keys: dotnet user-secrets list To clear all secret keys: dotnet user-secrets clear Now configure Program.cs to use secret keys: var builder = WebApplication.CreateBuilder(args); var movieApiKey = builder.Configuration["Movies:ServiceApiKey"]; var app = builder.Build(); app.MapGet("/", () => movieApiKey); app.Run(); Read the secret key in your file using Iconfigurati...
Post a Comment
Read more

DEPLOYING TO GITHUB PAGES!

Are you someone looking for a way to deploy your static application to  GitHub pages? You had gone through numerous blogs, youtube videos and asked many to help but were really unable that could help to you out? Did it happen itself last time but this time your website is not deploying?🥲🤔 Let me help you out! STEP 1:- Upload your project to GitHub. (a little differently.....) In the repository name write  your username.github.io and create the repository. Do the usual steps except for one change:- git remote add origin https://github.com/username/username.github.io.git git branch -M gh-pages //instead of writing index.html write gh-pages. git push -u origin gh-pages STEP 2:- In the terminal...... Install Github pages in your project folder using the command:- npm install --save gh-pages Add the following scripts to your package.json file. "scripts":{ "predeploy":"npm run build", "deploy":"gh-pages -d build",....} Then run this comma...
Post a Comment
Read more

How to setup Microsoft sample-aoai-chatgpt-api locally in Vscode without Authentication?

How to setup Microsoft sample-aoai-chatgpt-api locally in Vscode and run the frontend without Authentication?   In this tutorial we will learn to setup Microsoft sample-aoai-chatgpt-api and run the frontend without Authentication. Let's get started! STEP 1:- Fork the repository STEP 2 :- Navigate to the forked repository in your repositories. Click on code and then copy the url. STEP 3:- Open the terminal. Navigate to the directory in your terminal where you want to clone this repository. Write the following command. git clone <(your url)> STEP 4:- Open the code in vscode and run command start.cmd or ./start.cmd to install backend packages. STEP 5:- Go to frontend using command cd frontend and run npm install there to install all the packages. STEP 6:- Navigate to src/state/AppProvider.js file and write the following code in initial state to run the app without authentication.
Post a Comment
Read more