Deploy Strapi and NextJS to Heroku and Vercel

what's up i'm alex the entrepreneur in this video you'll be deploying your e-commerce project you'll apply strappy to heroku and xjs to versailles you'll also set up a web book which will trigger a new build anytime something changes on strappy in order to continue make sure you have access to the code for the e-commerce front-end and back-end which you can code with me on youtube if you want to take your career to the next level or you're overwhelmed by the amount of options for topics you can learn and you know that you want to build a beautiful portfolio of full stack react projects use the candy link to schedule a call with me to discuss mentoring even if you're just thinking about it click the link in the description now to deploy the nextjs e-commerce backend make sure you have access to the complete code you could with me on youtube or you can just pull it from github to set up strappy we're gonna need to set up the node version then set up the database connection then the upload provider lastly we'll set up the environment variables on a roku we'll then continue by connecting github to a roku so that we can have automated deploys and then we'll run a test deploy for this specific setup we're also going to have to add the magic secret key in strappy admin and then we're going to set up the end points that we need for the front end to fetch them first open the package.json and change the node engines that open up package.json down here on line 35 i see engines node change it from greater than 10.0.0 to greater than equal to 10.16 point and then add a space less than equal 14 point x point x which means that we're going to be using most likely node version 14 then save this file let's set up the code for the database to handle the production version first of all install pg open up your terminal and type npm ipg while we're at it let's also install an extra utility called pg dash connection dash string and this was going to come in handy in order to parse the db config a little easier after that open up the file called config database.js and you can see that it's currently set up to work with sqlite we're going to change it so that it will also work with pg during production first of all changing this function to have an explicit return statement so instead of the round bracket at the beginning replace it with a curly brace and the round bracket at the end replace with a curly brace as well then tab from line three to 16 in by one and add online to a return statement so this is going to be our default return statement default being the development settings let's go ahead and set up the production version first of all let's import our utility so const parse equals to require of pg dash connection dash string dot parse this way we have a utility to parse the connection string and you'll see how convenient it is in a second then let's work on the production setup i'm going to go on a new line twice go line five and type if emv no dmv which is a utility that allows us to get the environment variable we're going to check if the node dmv is triple equal to production i we're in production mode or in a production environment then we're going to parse this configuration with const config equals to parse off process dot emv dot database underscore url database url being the default url that a roku will attach to your main database so that's gonna come in handy a little later and once we have parsed it through our parse utility we're just gonna return an object that is similar to this one so we're gonna on line seven we're gonna return curly braces default connection set to default then connections concur libraries default so we're specifying our default connection and we're going to have a connector set to bookshelf then we're gonna have our settings and our settings are gonna have a client set to postgres the entire name postgres and then we're gonna finally use our utility by setting up host column config dot host port set to config.port database set to config dot database username set to config dot user and lastly password set to config dot password the utility has come in handy since we only need one environment variable instead of all of these and we just need to finish the settings by adding a comma after line 19 then go on a new line type options and type ssl set to false when you're going to switch from let's call it toy project to a real project you may have to play around with the ssl settings in order to preserve privacy for your connection you can also test this locally by running strappy in production mode alternatively which is what we're going to do in this video we're going to be trying that by deploying to a roku since we're deploying to a roku we'll need to use an upload provider to host our uploaded files we're going to be installing the strappy provider upload aws as free this is because it's the most commonly used and what i want you to notice is that every single strap provider upload which has this name as a pattern as a very simple documentation that you can follow however the configuration file for it will be a customize it will be different for every provider so you will have to read the documentation that said we're going to be using aws you can go in your terminal and type mpm i strappy dash provider dash upload aws dash s3 in order to manage the configuration you're going to need to create a file and again you can read the documentation to go deeper and go into more detail and the documentation will be available for any other upload you decide to use that said i'll be guiding you through setting up the aws one we're going to open up visual studio code i'm in the config folder and i'm going to create a new file called plugins.js this file will normally have a set of keys so let's type it out with module dot exports equals to open parents curly braces emv we receive the emv utility and then we're going to immediately return upload we're going to have our provider name which is provider column aws s3 then the provider options we're going to have the access key id in camel case set to emv aws underscore access underscore key underscore id then we're gonna have the secret access key set to emv aws access secret then we're gonna have a region set to emv aws region and lastly we're gonna have params and this params will specify a bucket notice the bucket is typed in uppercase b and it's going to have a value of emv with a string aws underscore bucket now if you were to add another plugin you could simply go at the end of the definition for this one which is called upload so at the end of line 12 then add a comma and then you can add other plugin this is effectively an object which is keyed by the name of the specific plugin now in order to work with a dual environment of development and production we will apply the same refactoring that we apply to the database file so we're going to change the function to be a function with an explicit return by changing the round parents to a curly brace then we're going to do the same at the end and then tab in from line 14 to 3 tab it in by one and then online shoe type return so now we have an explicit return statement and then here on line three i'm gonna do a conditional so if open parenthesis emv node underscore emv is triple equal to production i.e we're in production then we're gonna return this object actually let's go ahead and just cut out the entire return statement from line 7 to line 19. so if we are in production we will be returning this otherwise we're actually just gonna return an empty object and by returning an empty object we are specifying no configuration which means that the system defaults will be used which means the local upload up provider dependencies and the configuration for your database and your file upload for the sake of doing things right let's change the dmv dot example that you see down here and update it so that it will contain all of these extra set of variables that we're gonna have to inject at runtime so from line three i see that i have host port and strip sk i'm gonna go on a couple line down and i'm going to add database url which is the url postgres connection string for the database then we're going to have aws underscore access underscore key underscore id then we're going to have aws underscore access underscore secret and then aws underscore region and then aws underscore bucket re john my bet on the typo here it's region notice that the aws region will be the code that represents the regions so this will be equal to us west one for example or eu dash west-one or two whichever you end up using this one is gonna be called aws bucket and it's just the name of the bucket whichever name you gave the bucket that's the name that you're gonna be using while the access key and the access secret you're gonna have to find from your permission credentials with that said it's now time to move to heroku sign in and register to heroku this process is completely free reroku is one of the simplest way to get started with deploying uh complex applications so i highly recommend you do that and once you see this panel you can click up here on the right to create a new app in this case i'll call it strappy dash e-commerce dash deploy demo you can call it whatever you want but it has to be a unique name once you are provisioned with the app it's time to provision the database which you can get here in the resources tab you can navigate to this box and type post grass click the second option heroku postgres and you can use the hobby dev which is the free version there's no need to pay for this although once you do get into a production environment i highly recommend going above i typically use standard zero as my minimum requirement although i've had clients using also the hobby basic with success and no complaints at this point you can go in the settings page and you'll see this button that says reveal config vars once you click on it you'll see the database url and this is literally the connection string that we already set up to be able to parse so the next step is to just set up the rest of the keys you should have these on the emv dot example and i'm just gonna go through the motion although i'm not gonna leak my keys so i'm just gonna add the aws access key id and then you're going to have to put a value there as well then i'm going to have the aws access secret then i'm going to have the aws region and then the aws bucket something that is unique to our app is also the stripe sk the striped secret key so also make sure to add that you're not going to need to add the host and the port because those will be provided by heroku automatically at this point we are ready to make our first deploy we're going to go ahead and deploy by connecting our app from github at this point and i want you to notice that i did add all of the credentials you want to make sure to add them properly before you continue with this step but now we're going to go ahead and deploy by using the connection between heroku and github so in order to set that up we've got to go on github first i'm gonna navigate to my github i have a shortcut but you can go on github i typically go into repositories and then i'll click on new i'll call this the next dash e-commerce dash back-end deploy demo you can call it whatever you prefer i'm gonna set it to public although this setup will work even if your repo is private i've created the repository and once i do that there's a bunch of guides here and i'll just translate them to you and then i'll just copy and paste them but effectively actually we can use the second version here effectively we're just going to add a remote which means that we are now associating the keyword origin with this url which is the url that you see up here by the way it's just the same thing then we're gonna rename our master branch to main because github uses main as the default branch and lastly we're gonna push our main branch to origin so you can confidently either click here on copy or just copy it this way then open up the terminal check your git status make sure that everything is committed in my case i forgot to commit the invid.example so git add dot so that it's been tracked now you can see that if i get started now it's green then i'm gonna git commit dash m and in this case i'll do feet dot emv example and lastly we can just copy and paste the code which is again adding the remote setting up the branch and pushing you'll eventually learn this through repetition there is no reason to dwell too much on it because at every step you're gonna be guided so at this point i'm seeing a success message i'm gonna refresh github and you should see your code just like i'm seeing my own code now that the code is here we need to remember this uh name of this branch so i'll keep this tab open i'm going to go back on the roku and i'll go in the deploy tab here you have a bunch of options this one i showed a million times so i'm going to show you this one click on github and you will see a button that allows you to log into github you can continue the with instructions on screen it should take a few seconds and once you're done you're going to be able to select your own repo i have a bunch because of other companies as well and at this point i can see my name which is represents here you can see here and then i'm going to get the name of the repo i'll just copy it and i'll paste it in the repo name and i'm going to search i'll find this and i'll click on connect now i've connected the code from this repo with the deployment on eroku so i could just click here to enable an automatic deploy but it's a good practice to always do a manual deploy first so i'm just going to click on the play branch and we're going to see a log down here which will tell me what's going on basically so i'll keep track of that and once the app is successfully deployed we'll also enable automatic deploys honestly i did all i could to avoid having an issue with the build but unfortunately i got one so i guess i'll just take this as an opportunity to teach you how to deal with issues with the build now this issue is actually very frivolous so we'll fix it in a second i want to show you i want to take this opportunity to show you how to debug an issue with the build so you can see down here that we have a log for the build and you can see that this text right here is saying that there's a dangerous summer version and roku loves us and that the push was rejected from my experience this text right here is useless there is no no value to be gained here so what you want to do is you want to scroll up and you want to actually get the error so we're starting to see npm error these are actual errors but again this stuff is just saying that the the script has failed during build and then there's a log of the build so again it's not particularly useful so let's keep scrolling up again this is saying when this happened and now we're actually getting a message that is very interesting we're seeing error we're running command build could not load js config file tmp build blah blah blah and then a message that says requier is not defined so it's it's a little still a little obscure as to what it is but if you just copy this require which is not defined and not defined is something you get whenever a variable is not defined in javascript but if we just search for requier in our project and i literally just right click on ecommerce backend finding folder search for require i open up the database file and i see that i made a typo i made the typo of typing requier instead of require so let's go ahead and fix it i can then open the terminal git add dot to add everything git commit the sham with a text that says fix typo and then git push origin main to push the code to github at this point i fix the typo i'm going to get a confirmation of the code being uploaded and i can try a new deploy our build was successful so at this point you can scroll a little bit up see this black button saying enable automatic deploys and click on it and now anytime you push a change to github a roku will automatically deploy your changes provided that you deploy to the main branch so that means that now anytime you push to main you're gonna have new code which means that you can still deploy or you can still push your code to separate branches in order to use github just for source control and then you can use the main branch as a way to deploy your live site we see a button down here that says view or you can also scroll up and click on open up and you're going to be able to open up your admin panel by navigating to the url and adding slash admin go ahead and sign up yes all of your local data is gone and it's gone because you're using a different database this is typically very normal to most people but it may be surprising to you but yes the the data is gone because you're using a new database that is starting from scratch so i'm gonna just call it alex entrepreneured and i'll just quickly create an account you can see that we have orders products and users and in order to set up magic so that we can provide authentication and secure order storage and processing you're gonna go on your magic link and you need to add those credentials you can find the credentials here in the dashboard in magic link so click on the name of the project and then get your secret key and then submit to save then set up the users and permissions which you can look from the development version so click on settings users and permission plugin roles let's do the public role first and for public we just need to open up the find and find one for product so click on save and for the authenticator role by clicking roles authenticated we need to open up the confirm order the find order and the find one order at this point you can create a test product so go in collection types products and add your information this case i'll type the complete strappy course and i'll add an image with my image and at this point the file is being uploaded to aws there we go let's quickly add a description this is the course you should taking meta description the complete strappy course over 2000 students and i made a title with the complete strappy course dash entrepreneured let's add a price of 12.99 and this log has already been built i'm gonna save make sure to click the publish button after saving otherwise you're gonna get very confused so make sure to click publish and make sure that you see a green here with published version now we can check the products by navigating to the url of the oracle app slash products and you should be seeing your product publicly so that means that you were successfully able to set up your e-commerce strappy-based back-end and deploying that to a roku and at this point you can now use it to fit your needs in our case we're going to be connecting that with a next.js front-end in the next video in this video you'll be deploying the nexjs e-commerce front-end via burcell this is going to be almost too easy in order to continue you'll need to have deployed the strappy backend on a roku and you also need to get the source code for the ecommerce frontend you can also code it along with me on youtube these are the steps that you'll be taking first of all you'll create a github repository to push your front-end code then you'll sign up for versailles then you'll connect the repo then you'll add environment variables and lastly you'll run a deploy so let's get going in order to deploy on versailles we're going to be using the github integration go on github and create a new repository i typically do this by going here on repositories and then i click the green button on the right new i'll call this repo next dash e-commerce dash front-end dash deploy dash demo and i'll set it to public at this point we need to push our code to github if you never use git during the process of coding the front end you're going to have to just copy and paste this set of commands otherwise if you already know what git is and you already know to use this you can just get your remote down here set your branch to main and lastly push to origin so that's what i'm gonna do i'm gonna open up my ecommerce front end to run a git status to check the status i see that i'm on branch master nothing to commit working tree clean which means that everything is already committed then i'll just copy the three commands and i'll just copy them one by one the first one is git remote add origin and then this url it's basically setting up my remote such that if i were to type git remote v i will see that it's now set up to github then the second one is just renaming the current branch i mean to main because github uses main instead of master for principal branch name and lastly the last command is git push u origin main which means push the branch main to the remote cold origin i'm gonna run that and once it's done i can refresh the page here on github.com under my repo and i can see the code so next we're gonna go ahead and set up purcell signing up for versailles is a breeze if you've already signed up for github so i'll just show you what you have to do you just gotta go here click on sign up and then continue with your github account that's gonna make it super easy and the second you do that you should see a page that is very similar to this where you see your name and then you see a button on the right that says import project click on import project and that way you're going to be able to continue in order to deploy click on this option on the left import git repository and you're going to be asked for the url of your repo so just go on github double click up here and copy it and paste it and that's as easy as it is at this point you're gonna be able to set up your build settings since we're using a simple and plain next.js application without any workspace or any quirky stuff first cell will actually pick up our configuration and it's already set up for us the only thing so if you open up your build settings you'll see that they're already defaulted to the settings you would normally use while the only thing we actually have to change here is the environment variables if you code it along with me you may remember or not that there's a file in e-commerce front-end called utils urls.js and this file contains three specific variables up here that we need to pass as environment variables so you can see that there's a next public api url which i'm going to start by copying it i'm going to put it here on the left and the value of this will be the heroku backend you deployed so you now need to know exactly the url of your back-end and i'll show you how to get that i'm going to go on a roku i'm going to search for the project we built and yes i built a lot of projects strappy ecommerce deploy demo and then i'll click on open app once you click on open up you get the url and that's exactly the url you're looking for so copy the url which is typically the name of your app dot herokuapp.com and add it here make sure to delete the trailing slash at the end if you have a trailing slash at the end it's gonna break the build later so make sure to avoid that and then click on add at this point we're left with two more settings we have our public magic key in my case i'll just use the default public key that i already uh committed publicly but you want to go in your magic dashboard at magic.link and you want to retrieve the actual key that you're going to use so your production key in my case i'll just use this because this is a demo project and the last key you'll need is the stripe publishable key let's try public key so copy the name next underscore public underscore strap underscore pk put it as the variable name and then add your public key in my case again i'll use a test key in your case you should log in into your stripe dashboard and retrieve your production key click on add these variables will be added to the environment and you can specify different variables on different environments versailles is actually really versatile and at this point we're going to be running a demo build and at this point we'll be running our first build there we go you see the confetti you see the glory of your project being successfully deployed you can click on visit and you'll be able to visit your static site generated project that contains dynamic behavior and is also connected to your heroku strappy back end at this point let's quickly test the site the site has built static pages and we can log in in the login page i'm gonna receive an email which i'm gonna have to click the link into there we go i'm logged in and i can see my email here and i'm gonna even see a few orders that i ran in the background i'm gonna go in the single product i'm gonna try and buy it and i will generate a token in strappy that will be returned and will be used by the fronted sdk to redirect me to the stripe checkout in which i can safely add my credentials test credentials are a card with just a bunch of for and choose and a valid expiration date there we go payment is processing and on payment success i'm going to be redirected to the success page in which the endpoint on strappy will be triggered to verify that the order was successful giving me back a confirmation message nice the last thing we want to do is add a web book to update the site anytime you change the products let's go on versailles navigate to your workspace and specifically in the project then go in the settings scroll down to git and scroll down until you find deploy hooks add a new hook with a name of strappy the branch in this case will be main which is our default production branch which is you can see up here as well create hook you're going to get back a url which you can copy by clicking this button then navigate to strappy navigating the settings page under web books create a new web book with this blue button give it a name of versailles or rebuild yourself whichever you prefer and paste the url here the only extra thing we got to do is select when we're going to run the web book and we can do it at any time anytime an entry is created ie a collection type and anytime a media is changed we're going to trigger the web book let's go ahead and save the web book is here in order to test it let's go under products and create a second product click on add a new product the second product will be the entrepreneured mentoring i'm gonna actually upload an image just to test the aws upload let's see let's put this image right here there we go and let's call it mentoring on becoming a coach on codementor now we're going to do a quick meta description the mentoring coaching the mentoring coaching title let's put a price of let's put 1299 and save once you're done with the product make sure to publish it otherwise this will not work and now that it's been published navigate back to versailles go in the overview and you should be seeing a new upcoming just now building and this is because the second i saved and turned this product to public the web book was triggered which is causing a new build and since versailles uses incremental builds this will actually take very little time and it will basically rebuild the entire site with a second product and you can start seeing here that there's already a new slug i'm gonna visit the new site and after you know 25 seconds whatever we now have a second product that is already viewable for everyone so there you have it you've set up automatic deployments for roku and your cell you could also add cloudflare and a custom domain as a way to top this off if you're thinking about going on the 101 mentoring click the calendly link in description to schedule a call with me now

Channel: Alex the Entreprenerd

Views: 11,194

Keywords: strapi, stapijs, strapi.js, strapi.io, strapi notes, strapi course, strapi tutorial

Id: vbh3-G1jIUg

Length: 33min 6sec (1986 seconds)

Published: Mon Dec 28 2020