meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ixc2024:tech:wfrontend:deploying:start [2024/05/21 14:46] – alestaixc2024:tech:wfrontend:deploying:start [2024/05/28 13:51] (current) – alesta
Line 4: Line 4:
 Instead of hosting your project locally, it is best to deploy your web app online so that it would be accessible. Instead of hosting your project locally, it is best to deploy your web app online so that it would be accessible.
  
-**Netlify** allows extremely easy and beginner friendly deployment options for frontend projects.+[[https://www.netlify.com|Netlify]] allows extremely easy and beginner friendly deployment options for frontend projects.
 Just follow the steps below and your app will be online in no time! :-) Just follow the steps below and your app will be online in no time! :-)
  
Line 33: Line 33:
 === Deployment on Netlify === === Deployment on Netlify ===
  
-==6) Go to the //Sites// tab and opt for manual deployment it is the most beginner-friendly and most straightforward==+==6) Go to the ‘Sites' tab and opt for manual deployment it is the most beginner-friendly and most straightforward==
  
 {{:ixc2024:team_1:screenshot_2024-05-21_at_14.13.22.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_14.13.22.png?400|}}
  
-==7) Open your folder containing the project folder and drag and drop the containing folder into the designated place for manual deployment==+==7) You need to build your React project ==
  
-{{:ixc2024:team_1:untitled_drawing_8_.png?400|}}+Open terminal in your project and do the //npm run build// command. 
  
-==8) If you do it well, your website will be uploaded in no time!==+{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_09.42.59.png?400|}} 
 + 
 +Soon you will have created a //build// folder. 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_09.46.44.png?400|}} 
 + 
 +Now inside of the build folder create //_redirects// file (with no extension) 
 +Inside of it paste only the following __/*  /index.html  200__ (including the /* ) 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:screenshot_2024-05-28_at_09.48.32.png?400|}} 
 + 
 +If you skip this step you are potentially risking having the //Page not found error 404//. 
 +For explanation why this is necessary you may read on the following link: [[https://answers.netlify.com/t/page-not-found-issue-on-deploying-react-application/77842/2|Netlify redirects]] 
 + 
 +==8) Open your folder containing the project and drag and drop the build folder into the designated place for manual deployment== 
 + 
 +{{:ixc2024:tech:wfrontend:deploying:untitled_drawing_18_.png?400|}} 
 + 
 +==9) If you do it well, your website will be uploaded in no time!==
  
 {{:ixc2024:team_1:screenshot_2024-05-21_at_14.16.57.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_14.16.57.png?400|}}
 {{:ixc2024:team_1:screenshot_2024-05-21_at_14.17.05.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_14.17.05.png?400|}}
  
-==9) You can see information about your deployment==+==10) You can see information about your deployment==
  
 {{:ixc2024:team_1:screenshot_2024-05-21_at_14.19.14.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_14.19.14.png?400|}}
  
-==10) Go to the //Site configuratio//n tab and click on the link of your deployed website or app==+==11) Go to the 'Site configuration' tab and click on the link of your deployed website or app==
  
 {{:ixc2024:team_1:screenshot_2024-05-21_at_14.19.23.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_14.19.23.png?400|}}
  
-==11) Enjoy using your newly deployed app==+==12) Enjoy using your newly deployed app==
  
 {{:ixc2024:team_1:deployed_website.jpg?400|}} {{:ixc2024:team_1:deployed_website.jpg?400|}}
  
-==12) For further deployment and development go to //Deploys// tab and continue with manual drag and drop deployment of your project.==+==13) For further deployment and development go to ‘Deploys' tab and continue with manual drag and drop deployment of your project.==
  
 {{:ixc2024:team_1:untitled_drawing_9_.png?400|}} {{:ixc2024:team_1:untitled_drawing_9_.png?400|}}