I have a very simple Node.js/express app that I built using the tutorial by Traversy Media here: https://www.youtube.com/watch?v=uONz0lEWft0
During the build process, I would make updates to the .ts and .HTML files in the components directory and the web app would reflect the changes. I've since uploaded the project to github and cloned it to a new MEAN stack on Ubuntu. Now, when I make changes to the component files and the angular-src directory, the app is totally unaffected and continues to run as if no changes were made to any of the files.
I've tried to start and restart Node.js but I feel like the app is compiled or "built" now and is no longer referencing my files.
How do I get back to the point where I can further develop this app?
github link: https://github.com/negativepitch/Mean-LoginApp
First don't upload node_modules.That's why you have package.json ;)
Then, have you tried to execute npm install ?
Related
I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!
I have a group of projects that I've been compiling on Github as part of the Frontend Mentor challenges - https://github.com/MikeBish13/frontend-mentor-challenges
These are all stored in the same folder locally on my PC and every time I add a folder, VS Code recognises this and queues that folder up to be committed and then pushed to the Github folder.
I've just created a new React App via create-react-app and have added that to my folder locally on my PC and I now want to add it to the folder on Github, but VS Code is not recognising it as a new folder and won't let me commit, and then push changes.
Does anybody know how I could do this? Are there settings I need to change in the React project?
I've run npm build on my React project, if that makes any difference, but I've not changed or added anything new other than the initial create react app.
It's probably a simple answer but I'm a novice when it comes to React/Github.
UPDATE:
Here is a screenshot of my folder structure
I've deployed my React app to GitHub Pages and I'm seeing all of my files and code in the sources tab. Here is a snippet of what I mean:
I've built my application using react scripts build and have tried pushing those files to my hosted Git repo as well as using the npm package gh-pages to push my build for me but all my code is still shown. Is there a way to hide these files on the deployed app or is this just how Githug Pages works since all my code is already in a public repo?
You can never really hide the source since its runs in the browser, however when you run the build in 'production' mode, you minify and uglify the source to make it difficult to read it should just show 1 single chunk js file. In addition turn off source maps in your compiler settings (--no-source-maps).
https://create-react-app.dev/docs/production-build/
I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.