How to Deploy JavaScript Apps with Netlify

In this article, I am going to share the steps to deploy a JavaScript project to Netlify using either a GitHub repo or with local computer files.Before we startOpen the Netlify App by clicking here.Create a free account on Netlify.Deploying from a loca…


This content originally appeared on Bits and Pieces - Medium and was authored by Khushi Bhambri

In this article, I am going to share the steps to deploy a JavaScript project to Netlify using either a GitHub repo or with local computer files.

Before we start

  • Open the Netlify App by clicking here.
  • Create a free account on Netlify.

Deploying from a local computer folder

  • Make a folder and include all of your project’s files (like HTML, CSS, JavaScript etc).
  • Log in to Netlify and click on create a new site/ Add new site button and select Deploy manually.
  • Now Drag and drop the project folder to Netlify as shown:
  • Netlify will start the deployment of your site and will display a green link after successful completion.
  • If you make some changes and want to update the site you can go to the deploys tab and select ur site and copy the updated project folder, the site will be deployed in the same URL.

Note: Please specify the main source HTML file as index.html as the netlify configuration deploys index.html as the base file.

Using a GitHub repo

  • Make a GitHub repository and push all the project’s required files.
  • Log in to Netlify App and click the ‘Add new site’/’Create new site’ button and select import an existing project.
  • Choose the Git provider (GitHub). This will redirect to the GitHub website for authorization. After authorization, select the GitHub repository that contains project files.
  • After choosing the repository, you can add custom site settings to the website. Choose the default settings if the source files are present at the root of the repository, and select ‘Deploy Site’.
  • If your source files are not present at the root directory, they will be at a subdirectory in the repository, specify the subdirectory name/path in the ‘Publish directory’ field in ‘Build settings’ and press ‘Deploy site’.
(Piano is the subdirectory name here)
  • For any source updates, whenever the repository contents change, the site is deployed again automatically.
  • The site URL/link can be customized by changing the site name in site settings.

This completes the deployment process. You should now be able to access your project online and have a link that you can use and share with the world.

I hope you have found this useful. Be sure to let me know your thoughts in the comments.

Build modular, reusable React components with Bit.

Monorepos are a great way to speed up and scale app development, with independent deployments, decoupled codebases, and autonomous teams.

Bit offers a great developer experience for building component-driven monorepos. Build components, collaborate, and compose applications that scale. Our GitHub has over 14.5k stars!

Give Bit a try →

An independently source-controlled and shared “card” component (on the right, its dependency graph, auto-generated by Bit)

Learn more


How to Deploy JavaScript Apps with Netlify was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Bits and Pieces - Medium and was authored by Khushi Bhambri


Print Share Comment Cite Upload Translate Updates
APA

Khushi Bhambri | Sciencx (2022-01-14T11:32:32+00:00) How to Deploy JavaScript Apps with Netlify. Retrieved from https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/

MLA
" » How to Deploy JavaScript Apps with Netlify." Khushi Bhambri | Sciencx - Friday January 14, 2022, https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/
HARVARD
Khushi Bhambri | Sciencx Friday January 14, 2022 » How to Deploy JavaScript Apps with Netlify., viewed ,<https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/>
VANCOUVER
Khushi Bhambri | Sciencx - » How to Deploy JavaScript Apps with Netlify. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/
CHICAGO
" » How to Deploy JavaScript Apps with Netlify." Khushi Bhambri | Sciencx - Accessed . https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/
IEEE
" » How to Deploy JavaScript Apps with Netlify." Khushi Bhambri | Sciencx [Online]. Available: https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/. [Accessed: ]
rf:citation
» How to Deploy JavaScript Apps with Netlify | Khushi Bhambri | Sciencx | https://www.scien.cx/2022/01/14/how-to-deploy-javascript-apps-with-netlify/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.