I just completed a MERN application following a great guide but it doesn't cover deployment. I am currently unsuccessful deploying, getting 'Application Error' at this link: https://enigmatic-castle-43725.herokuapp.com/
Here is the link to the git repo: https://github.com/Sciphr/Project-Manager
I have set up a 'heroku-postbuild' script with the following commands:
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
My project setup is using Create-React-App in a 'client' folder, and then building the express server in a 'server' folder. I have the environmental variables setup in Heroku, and at one point the page loaded (just not the data from the GraphQL queries), but now it is back to 'Application Error'
I have a strong feeling the issue is with my index.js file in the 'server' folder, but I can't seem to understand exactly where the issue is. Thanks for any/all help anyone can give me, it really is appreciated. Cheers!
Alright everyone who potentially saw this, my apologies as I did find the issue. This was my first time using GraphQL and I did not at all remember about the ApolloClient instance created in App.js, as that was the one place where you type out a specific URL. I also changed the position of my dotenv dependency from devDependencies to dependencies.
So before the uri was set to 'https://localhost:5000/graphql', which naturally I have now changed to my properly deployed link. Guess it would make sense to make it an ENV variable anyway.
Anyways thanks Chris sorry to take your time!
Related
I am currently working on a react, working perfectly in local, the CSS seems to be broken in production, even when using the "normal" production deployment tuto made by react here
local
remote
node, npm and yarn versions are the same locally and remotly ... remote is debian, local is mac
I do not understand ...
Anyone had the same issue maybe ? :)
Found my answer ;) duplicate library, if anyone has
in package.json, if you declare #material-ui/core, you do not need to import #material-ui/styles
Have you checked in debug console from browser whether CSS files are loaded or not? Also by normal deployment do you mean production build served locally or remotely?
Please check network request made from console, sources and other part too.
I have been building an app with awsamplify for quite some time now. Today I descided to run some test and when I did
npm run start-web
Everythin worked fine. Now I went on to run mobile test with the use of Expo and ran
npm run ios & npm run android
which both returned the following errors.
Unable to resolve "./aws-exports" from "App.js"
Building JavaScript bundle: error
my problem is similar to the one below just its amplify and not awsmobile
https://github.com/aws-amplify/amplify-js/issues/669
Deos anyone know what I can do to resolve this?
Thanks alot!
I jsut removed some unused imports and the error changed to this
Unable to resolve "#aws-amplify/ui/dist/style.css" from "node_modules\aws-amplify-react\dist\Amplify-UI\Amplify-UI-Components-React.js"
Barely mentioned in the AWS docs:
For setting up a local dev folder, from an existing amplify repo, use an amplify env pull,
It will "pull" the ./aws-exports.js from the server, the latest one that was pushed there,
similar to git push and git pull but for the amplify env
It's true that an amplify push will create the ./aws-exports.js file,
but it will also "push" it to the server, overwriting whatever is there.
amplify status is also a handy command, similar to git status
I ran amplify env pull
and then found it in the ./src/aws-exports.js
not sure if the pull did it, or if it was always there but this is for an existing expo project
Confing your projects, using terminal go to the main folder and amplify init to config your project
amplify init
Do you to use an existing environment? (Y/n) Y
Choose the environment you would like to use: dev
Choose your default editor: Visual Studio Code
Choose the type of app you're building: javascript
What javascript framework you're using: ionic
Source Directory Path: src
Distribution Directory Path: www
Build Command: npm run-script build
Do you want to use an AWS profile? Y
Please choose the profile you want to use: select your personal IAM profile
I have a working react.js application, which works using npm start (app built using create-react-app).
When I try to run npm run build, it builds the application. I serve it using
serve -s build -l 3000
It loads the first dashboard page but does not communicate with the server. I have put console.log statements in server to check for any requests coming in, but it never logs anything... which means the client does not talk to the server.
I have proxy statement in package.json to connect to server on port 3300. This works in development mode but in production mode it seems to not pickup the proxy settings in the package.json.
Please guide... this is my first time switching to production mode... any guidance on switching to production mode would help.
BTW I use react-loadable as well...
The proxy field in package.json is only used in development by webpack-dev-server. You can learn more about this here
Thanks for all the help guys....
Finally, I understood that "npm run build" just creates the static files to deploy. But how to use it, is our hands. :)
I copied the build folder inside the /server folder and added the following line in my root server.js file itself. Basically, served the static files from /server/build folder and it all works beautifully.
app.use('/', express.static(__dirname+'/server/build'))
Thanks for the support. :)
I have been trying to deploy my create-react-app on a server but have been unable to do so. I created a homepage field in the package.json as instructed and set it to the https://... domain address. Then I ran npm run build and created the build file. I am finding resources sparse online, instructing me what to do after. Running npm start just runs from the root directory, not displaying anything. The source shows and index.html file which paths are stuck at the root. I am wondering what I need to do to run/deploy the build(production). I have tried downloading the npm package serve, but this seems to do the same as npm run, if not worse. I feel like I am only moving in the opposite direction, and would love some assistance. Thank you.
You need to run npm build.
This creates files in the build folder.
These files you then need to take and put them in a folder that is served by a web server.
You can use Nginx, Apache, IIS or any other production ready web server.
You have an IT department, ask them where exactly you need to put your files.
I have been trying to figure out how to host my React App on GitHub Pages. I found these two guides, but neither seem to work:
https://github.com/gitname/react-gh-pages
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
The first guide seems to only work with a pre-made React-App (step 2 of procedure). On the other hand, it seems to work correctly otherwise. The issue with this guide for me is that I made my app from scratch, so I don't have the same names for codes. For example I had to use (because dist/ is my build path):
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d dist/"
}
The other guide seems to have the same issue (not custom app), but I'm not sure because I don't recognize all of the code. Since a lot of the code is different, for example they have:
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test — env=jsdom”,
“eject”: “react-scripts eject”,
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
}
When I deployed gh-pages, a different branch was built in my github repo, but I'm not sure if it's supposed to be working automatically. Essentially, I'm kind of new to this, so I'm not sure what I'm doing wrong. I'd really like to finish creating this website with GitHub Pages because it seems that I am close, but if this is futile, is there a free alternative that would be easy to setup?
Here is a link to my github master branch: https://github.com/NumaKarolinski/PersonalWebsite
I think by looking at my package.json, and webpack.config.js, it should be obvious as to what I am doing differently from usual?
I don't get any errors when following the guide, but the intended URL just has a 404 error. There are no errors in the console (except on Chrome which has a favicon.ico error which doesn't make much sense since I don't have a favicon).
For your other options i prefer firebase for reactjs app.Just follow this steps to deploy app build to firebase.
install firebase cli
cd to project
npm run build
firebase init
firebase deploy
and you are done.Hope this help
In the examples you linked, they are using create-react-app as a boilerplate, that's why it looks so different. All the build scripts are given to you. I would recommend using create-react-app for small to even medium size projects, and you can always eject to config the boilerplate if needed. Github pages are probably the easiest option around, but you are really close.
Option 1:
You need to create a build directory, and push that directory to a Gitbub branch and have Github host that branch for your website. To do that, you will need to go to settings in that repo and set it to use a different branch. Just make sure only built app is in that branch. Basically, all your js files should be compressed into one file and etc.
Option 2:
You have a pretty small app, just create a create-react-app and copy everything over, and then follow the instruction again for deployment.