meta data for this page
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| ixc2024:tech:wfrontend:deploying:start [2024/05/21 14:45] – created alesta | ixc2024: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:// |
| 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 10: | Line 10: | ||
| === Registration on Netlify === | === Registration on Netlify === | ||
| - | 1) Go to https:// | + | ==1) Go to https:// |
| {{: | {{: | ||
| - | 2) Register using your email and use password generator because Netlify has high requirements for password strength. | + | ==2) Register using your email and use password generator because Netlify has high requirements for password strength. |
| {{: | {{: | ||
| {{: | {{: | ||
| - | 3) Verify Netlify’s email that you received in your email inbox and login | + | ==3) Verify Netlify’s email that you received in your email inbox and login== |
| {{: | {{: | ||
| - | 4) Fill up the questionnaire (what you answer does not really matter) | + | ==4) Fill up the questionnaire (what you answer does not really matter)== |
| {{: | {{: | ||
| - | 5) Skip the step about deploying a website | + | ==5) Skip the step about deploying a website== |
| {{: | {{: | ||
| 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' |
| {{: | {{: | ||
| - | 7) Open your folder containing the project | + | ==7) You need to build your React project |
| - | {{: | + | 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! | + | {{: |
| + | |||
| + | Soon you will have created a //build// folder. | ||
| + | |||
| + | {{: | ||
| + | |||
| + | Now inside of the build folder create // | ||
| + | Inside of it paste only the following __/* / | ||
| + | |||
| + | {{: | ||
| + | |||
| + | 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:// | ||
| + | |||
| + | ==8) Open your folder containing the project and drag and drop the build folder into the designated place for manual deployment== | ||
| + | |||
| + | {{: | ||
| + | |||
| + | ==9) If you do it well, your website will be uploaded in no time!== | ||
| {{: | {{: | ||
| {{: | {{: | ||
| - | 9) You can see information about your deployment | + | ==10) You can see information about your deployment== |
| {{: | {{: | ||
| - | 10) Go to the //Site configuratio// | + | ==11) Go to the 'Site configuration' |
| {{: | {{: | ||
| - | 11) Enjoy using your newly deployed app | + | ==12) Enjoy using your newly deployed app== |
| {{: | {{: | ||
| - | 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' |
| {{: | {{: | ||