diff --git a/deploying/deploying.md b/deploying/deploying.md deleted file mode 100644 index 0683ed9ef..000000000 --- a/deploying/deploying.md +++ /dev/null @@ -1,212 +0,0 @@ -# Deploying your project to Heroku - -### Projected Time - -About 3-4.5 hours - -### Prerequisites - -- Node.js and npm must be installed. -- An existing Node.js app -- [JS I - VI](../javascript) -- [Node](../node-js/node-js.md) -- [Express](../express-js/express.md) -- [PostgreSQL](../databases/installing-postgresql.md) - -### Motivation - -Deployment is a fancy term for getting your website on the web. After building out your app, you might want to share it with others and to do that you need to deploy your app to the web where others can access it. In this lesson, we'll learn more about deployment and learn one way to deploy an app. - -### Objectives - -**Participants will be able to:** - -- Deploy their website to a third-party hosting service such as Heroku. - -### Specific Things to Learn - -- What is deployment? -- Heroku - a cloud-based server - -### Materials - -- [Video - What is Heroku (4 mins watch)](https://youtu.be/r5ZUQvl9BtE) -- [Techtonica Slides: Deploying](https://docs.google.com/presentation/d/1Enwhd9hl1fn1-afMXJ6xvkJm5SDJpHjfQoA7s2znHpw/edit?usp=sharing) -- [Deploy Node.JS Apps to Heroku (10 mins Video)](https://youtu.be/AZNFox2CvBk) - -### Lesson - -- Heroku is a cloud-based service you can use to put your site on the internet for people to interact with. -- Learn about deployment by going through the [Techtonica Slides on Deploying](https://docs.google.com/presentation/d/1Enwhd9hl1fn1-afMXJ6xvkJm5SDJpHjfQoA7s2znHpw/edit?usp=sharing) -- Learn a little about Heroku by watching: [Video - What is Heroku (4 mins watch)](https://youtu.be/r5ZUQvl9BtE) -- Watch [Deploy Node.JS Apps to Heroku (10 min Video)](https://youtu.be/AZNFox2CvBk) - -#### Deploying - -Now we'll work on deploying your app to Heroku. - -We'll be combining your front-end (React) with your back-end (Express) and deploying it to Heroku. Your front-end contains "static" JavaScript files -- when you deploy to Heroku, it turns your whole React app into a couple of static files that it will serve to the browser. No matter what data you have in the database, these files will always be the same. - -Your backend, on the other hand, is dynamic -- when you make an API request, the backend runs javascript code to do things like reading and writing to a database. Unlike the React app, which always serves the same files to the browser, the backend will serve different information to the browser depending on what's in the database. We're going to combine your dynamic code (Express), with your static code (React). - -1. cd into the React app and create 2 new directories `client` and `server`, then move _everything_ into the directory `client`: - -``` -cd -mkdir client -mv * client -``` - -2. Create a server directory. You will copy all the files from your Express API folder (1-3 JS files + package.json) into the `server` folder you're about to create inside your React app. _**This is where your API code will live from now on -- don't modify or use the old directory or repo**_ - -``` -mkdir server -cp my-express-server/* server -# We need to keep package.json and node_modules at the top level. -mv server/package.json . -mv server/package-lock.json . -mv server/node_modules . -``` - -At this point, you should have the following directory structure: - -``` -./eventonica-app -./eventonica-app/client/* # The code for your React App -./eventonica-app/server/* # Your express API (app.js etc.) -./eventonica-app/package.json # Toplevel package.json used by Heroku to run your app -./eventonica-app/package-lock.json # Toplevel package-lock.json used by Heroku to run your app -``` - -3. Test out your new server locally: - -``` -# Make sure you use the filename you used when you created your Express API -node server/app.js -``` - -4. Modify your gitignore to ensure you don't commit `build` or `node_modules`, even though they aren't at the root. Add these lines: - -``` -**/node_modules/ -**/build/ -``` - -5. Change the port your server is listening on to be - `process.env.PORT || 3000` (Replace 3000 by a different number if your Express app was configured to run on a different port) - -When we deploy to Heroku, Heroku will choose what port our server runs on. - -6. Modify your express server to serve static files by adding this block to your express server AFTER all your other defined routes: - -```javascript -// Add this below all your other routes -if (process.env.NODE_ENV === 'production') { - // Serve any static files - app.use(express.static(path.join(__dirname, '../client/build'))); - // Handle React routing, return all requests to React app - app.get('*', function (req, res) { - res.sendFile(path.join(__dirname, '../client/build', 'index.html')); - }); -} -``` - -This block of code only runs in production. When it runs, it will serve your JavaScript files if the URL doesn't match an existing API. - -6. Configure the top-level `package.json` to work with Heroku by adding the following two lines to the `scripts` section: - -```json - "start": "node server/server.js", - "heroku-postbuild": "npm install --only=dev --no-shrinkwrap && npm run build" -``` - -You can replace `node server/server.js` with whatever you named your API code -file. - -7. Create a free Heroku account at https://signup.heroku.com/dc. - ThroughtheHerokuwebUI,createanewApplication.Onceyoucreatetheapp,addthePostgresadd-onbygoingtotheResourcestabandsearchinginthe"Add-ons"searchboxforPostgres.Clickthe"HerokuPostgres"option.Finally,selectthefreeversionandclick"Provision".OryoucancreateanewApplicationfromtheCLI.Tocreateanapplicationwithname,installtheHerokuCLIandrunthefollowingcommand`heroku create app_name` - This command will only be used on an initialized git repository. In that case, the command creates the application as well as a git remote, that you can use to push your code to Heroku: - - ```mkdir example - cd example - git init - heroku apps:create app_name - - ``` - -8. Install the Heroku CLI: `brew tap heroku/brew && brew install heroku` then use `heroku login` - -9. Attach your Heroku app to your code by running `heroku git:remote -a YOUR-APP-NAME` - inside the terminal at the root of your project directory. - -10. Configure your database. Heroku will specify environment variables you can use to connect to the DB: - -```javascript -new Pool({ - // Make sure you swap out and - connectionString: process.env.DATABASE_URL || 'postgres://localhost:5432/' - // Use SSL but only in production - ssl: process.env.NODE_ENV === 'production' -}); -``` - -Fill in your local database name in the Postgres URL. This is the default -database URL when your app is running locally. - -11. Use Heroku to create the database tables you need: - `heroku pg:psql` - You should use the same commands you ran to create your database locally - `create table events (.....)` - If you've forgotten, `psql` into your local database and check your table schema - with `\d events`. Copy that schema into your new Heroku database. - -12. Commit everything! - -``` -git add -a -git commit -m "Heroku setup\!" -``` - -Ensure you don't have any missing files: `git status` and commit them if you need to. - -13. Deploy your app! - `git push heroku main` - This takes a long time. - This will print the URL your app was deployed to. Try going to it! If something goes wrong, use `heroku logs --tail` to debug. - -### Wrapping Up - -Lastly, we'll configure your React frontend client to work seamlessly with your express server backend locally, even though they're running on two different ports. - -create-react-app: add the following line to `client/package.json`: - -``` -"proxy": "http://localhost:3000/" -``` - -React + Vite: add the following line to `client/vite.config.js`: - -``` -server: { - proxy: { - '/api': { - target: "http://localhost:8080", - changeOrigin: true, - secure: false, - } - } - } -``` - -### Gotchas - -- Ensure you don't accidentally commit `node_modules` -- Don't forget to configure `port` to come from `process.env` -- Use `heroku logs --tail` to see what's wrong - -All done! Small differences in the way you've set up your site may make bits of this process not work as expected, so there may be some debugging required. Here is a sample repository you can refer to https://github.com/esausilva/example-create-react-app-express - -### Supplemental Resources - -- [Tutorial - Heroku Dev Center Deployment](https://devcenter.heroku.com/articles/deploying-nodejs) -- [Overview of Deployment Options - MDN Express & Node Deployment](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment) diff --git a/deploying/general-project-deploying.md b/deploying/general-project-deploying.md new file mode 100644 index 000000000..2bd74d540 --- /dev/null +++ b/deploying/general-project-deploying.md @@ -0,0 +1,135 @@ +# Deploying Your Web Application + +## Projected Time +About 3-4 hours + +## Prerequisites +- Basic understanding of web development concepts +- A completed web application project ready for deployment +- Command line/terminal familiarity +- Git version control basics + +## Motivation +Deployment is the process of making your application available on the web for others to use. After spending time building your application locally, deployment is how you share your work with the world. Understanding deployment concepts is essential for any web developer, regardless of which specific platform you ultimately use. + +## Objectives +- Understand the difference between development and production environments +- Prepare an application for deployment by following best practices +- Choose an appropriate deployment platform based on project requirements +- Configure environment variables for production +- Deploy a basic web application to a hosting service +- Troubleshoot common deployment issues + +## Specific Things to Learn +- Deployment environments (development, staging, production) +- Environment variables and configuration management +- Build processes for production +- Static vs. dynamic site deployment +- Continuous Integration/Continuous Deployment (CI/CD) concepts +- Domain configuration and DNS basics +- Monitoring deployed applications + +## Materials +- [Web Deployment Explained Simply](https://www.youtube.com/watch?v=M6i8F8-Jz8k) +- [What is CI/CD?](https://www.redhat.com/en/topics/devops/what-is-ci-cd) +- [The Twelve-Factor App](https://12factor.net/) - Industry standard methodology for building deployable web applications + + +## Lesson + +### What is Deployment? +Deployment is the process of making your application available on the internet. This involves: +1. Preparing your code for a production environment +2. Choosing and configuring a hosting platform +3. Uploading or pushing your code to that platform +4. Configuring any necessary services (databases, authentication, etc.) +5. Making your application accessible via a URL + + +### Deployment Environments +- **Development**: Your local environment where you build and test features +- **Staging**: An environment that mimics production for final testing +- **Production**: The live environment that users interact with + +### Preparing Your Application for Deployment + +1. **Environment Variables** + - Sensitive information should never be hardcoded + - Use environment variables for API keys, database credentials, etc. + - Different platforms have different ways to set these variables +2. **Build Process** + - Many modern applications require a build step + - This often includes minification, bundling, and optimization + - Understand your framework's build commands (e.g., `npm run build`) + +3. **Configuration Management** + - Separate configuration from code + - Use different configurations for different environments + +4. **Database Considerations** + - Ensure database connection strings use environment variables + - Consider database migrations and seeding in production + - Backup strategies for production data + +### Common Deployment Platforms +Different platforms have different strengths: +- PaaS (Platform as a Service): Simplest to use, handles infrastructure +- IaaS (Infrastructure as a Service): More control, more complexity +- Serverless: Pay-per-use, good for variable workloads +- Static hosting: Simple, fast, limited to frontend applications + +### Continuous Integration/Continuous Deployment (CI/CD) +- Automates testing and deployment processes +- Ensures code quality before deployment +- Reduces manual errors in the deployment process +- Popular tools include GitHub Actions, Jenkins, CircleCI + +### Domain Configuration +- Understanding DNS records (A, CNAME, MX, etc.) +- Connecting custom domains to your deployed application +- SSL/TLS certificates for HTTPS + +### Monitoring and Maintenance +- Logging in production environments +- Performance monitoring +- Error tracking +- Scaling considerations + +## Common Challenges +- Environment variable configuration issues +- Build process failures +- Database connection problems +- CORS (Cross-Origin Resource Sharing) issues +- Path and routing differences between development and production + +## Independent Practice +1. Choose a simple application you've built +2. Identify what environment variables it needs +3. Research two different deployment platforms +4. Create a deployment checklist for your application +5. Deploy your application to one platform +6. Document any issues you encounter and how you resolved them + +## Check for Understanding +- What is the difference between development and production environments? +- Why should you use environment variables? +- What steps would you take to prepare a Node.js application for deployment? +- How would you troubleshoot if your application works locally but fails in production? +- What are the advantages and disadvantages of different deployment platforms? + +## Supplemental Resources +- [Deployment Best Practices](https://www.freecodecamp.org/news/deployment-best-practices/) +- [Understanding the Deployment Process](https://www.atlassian.com/continuous-delivery/principles/deployment-best-practices) +- Platform-specific guides: + - [Deploying to Heroku](link-to-heroku-guide) + - [Deploying to Vercel](link-to-vercel-guide) + - [Deploying to Netlify](link-to-netlify-guide) + - [Deploying to AWS](link-to-aws-guide) + - [Deploying to Google Cloud](link-to-gcp-guide) + +## Extension Activities +- Set up a CI/CD pipeline for automatic deployment +- Configure a custom domain for your deployed application +- Implement monitoring for your production application +- Create a staging environment for pre-production testing +- Explore containerization with Docker for deployment