I made a very simple gatsby site with AWS Amplify tho, site map was not created by 'gatsby-plugin-sitemap'.
[package.json]
{
"name": "web_matching",
"version": "1.0.0",
"private": true,
"description": "web_matching",
"author": "uekyo",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^2.26.1",
"gatsby-plugin-sitemap": "^2.11.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
[gatsby-config.js]
module.exports = {
siteMetadata: {
title: "web_matching",
siteUrl: `https://amp.d1aw1cuurv9iud.amplifyapp.com`,
},
plugins: [
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
}
]
};
[amplify.yml]
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn build
artifacts:
baseDirectory: public
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Do you guys have the same experience? By the way, if I enter the sitemap URL, it's moved to a top page automatically. However, it works on localhost. The problem seems to be in Amplify.
Running locally with gatsby develop will not serve up the sitemap.
You must run under production mode by running gatsby build && gatsby serve
Then the sitemap should be available via http://localhost:9000/sitemap.xml
Related
I want to deploy my react app which was built using vite into AWS Amplify but the build is failing. Here's how my package.json looks
{
"name": "app",
"author": "ashiqdey",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
},
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"prettier": "^2.5.1",
"vite": "^3.1.0"
}
}
What wrong I am doing?
Edit : Here's my yml file, After getting vite command not found error I had added npm i vite -g, still no luck
After adding the npm i vite I am getting this error
Developing software: 49% time spent on cloud configuration, 49% on build scripts, 2% writing code. And this is with all the amazing new tools becoming available.
Your package file correct and just like mine (although my vite is older) so this answer may not help you.
The amplify.yml has a preBuild step that should be doing a yarn install (or npm install), so vite and other packages will be downloaded.
I have amplify.yml in the root of my project because I changed baseDirectory: / to baseDirectory: /dist.
I have a vite.config.ts:
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser',
},
]
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts',
}
})
My index.html has some extra for vite:
<body>
<div id="root"></div>
<script>
window.global = window;
window.process = {
env: { DEBUG: undefined },
};
var exports = {};
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
EDIT
Here's my amplify.yml file:
version: 1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: dist/
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Revert the amplify configuration back to its original form and try to check your package.json for these following settings.
I am working on a website using Preact, and I am trying to proxy requests made in the browser to the development server I'm using as the back end.
When I try to run the front end application with yarn client, it errors out and informs me it cannot find the http2-Proxy module despite my installing it.
My directory structure is as follows:
Website_Root:
| package.json
|
+---dummy-api
|
+---frontend
| package.json
| README.md
| snowpack.config.mjs
|
+---public
|
+---src
| index.jsx
|
+---assets
|
+---components
|
+---routes
I'm attempting to use the Yarn Workspaces feature; as such my package.json at the root level is as follows:
{
"name": "Website",
"packageManager": "yarn#3.1.1",
"scripts": {
"client": "yarn workspace frontend dev",
"mockapi": "yarn workspace dummy-api dev",
"dev": "yarn concurrently --kill-others-on-fail \"yarn client\" \"yarn mockapi\""
},
"workspaces": [
"frontend",
"dummy-api"
],
"devDependencies": {
"concurrently": "^6.4.0"
},
"dependencies": {
"preact": "^10.6.4"
}
}
The package.json inside of the frontend workspace is as follows:
{
"name": "frontend",
"private": true,
"proxy": "http://localhost:9000/api",
"scripts": {
"dev": "snowpack dev",
"build": "snowpack build",
},
"dependencies": {
"axios": "^0.24.0",
"http2-proxy": "^5.0.53",
"preact": "^10.6.4",
"preact-router": "^3.2.1",
"react-table": "^7.7.0"
},
"devDependencies": {
"#prefresh/snowpack": "^3.0.0",
"#snowpack/plugin-dotenv": "^2.1.0",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"snowpack": "^3.8.8"
}
}
And, finally, my snowpack.config.js is as follows:
import proxy from "http2-proxy";
/** #type {import("snowpack").SnowpackUserConfig } */
export default {
alias: {
react: "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
"react/jsx-runtime": "preact/jsx-runtime",
},
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: ["#snowpack/plugin-dotenv", "#prefresh/snowpack"],
routes: [
{
match: "all",
src: "/api/.*",
dest: (req, res) =>
proxy.web(req, res, { hostname: "localhost", port: "9000" }),
},
],
devOptions: {
open: "none",
},
};
I can't help but think I've set something up incorrectly; snowpack should be able to find http2-proxy since I've installed it, but I genuinely don't understand what the holdup is.
I've also tried installing http2-proxy at the root level to no avail.
I believe I discovered the problem.
I did not initialize the yarn workspaces correctly.
I tried out a minimum working example of preact with snowpack, and found that creating a parent yarn directory, creating the child directories, registering them in the parent package.json and then inside each child subdirectory running yarn init -y instead of yarn init -2 produced the necessary results.
I'm making a Gatsby site, and I've intially set it up to use markdown files via gatsby-transformer-remark. I've since decided to move it over to MDX in order to have a bit more freedom in what content I can use.
I've followed this guide to migrate the project from MD to MDX, but I keep getting the following error:
Cannot find module 'D:\XXXX\XXXX\gatsby\.cache\caches\gatsby-plugin-mdx\webpack\output.js'
Require stack:
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\utils\render-html.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby\source-nodes.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby-node.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\initialize.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\services.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\commands\develop-process.js
- D:\XXXX\XXXX\gatsby\.cache\tmp-4452-lp3aICfNr8bo
I've tried:
Clearing cache and build files (gatsby clean)
Updating all packages, including Gatsby itself
Various ways to include the plugin in gatsby-config.js
Changing it all back to MD, making sure it works, and then migrating it to MDX once again.
Doing a build. Same thing happens as when running gatsby develop
Deleting package-lock.json and node_modules folder and running npm install again.
Nothing worked. This has to be something really stupid to do with NPM or Webpack but I just don't see it.
gatsby-config.js
module.exports = {
siteMetadata: {
title: "XXXX",
copyright: "XXXX"
},
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`],
},
},
`gatsby-transformer-remark`,
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
]
}
package.json
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"#mdx-js/mdx": "^1.6.22",
"#mdx-js/react": "^1.6.22",
"gatsby": "^3.1.2",
"gatsby-plugin-image": "^1.1.2",
"gatsby-plugin-mdx": "^2.1.0",
"gatsby-plugin-sharp": "^3.1.2",
"gatsby-source-filesystem": "^3.1.0",
"gatsby-transformer-remark": "^3.1.0",
"gatsby-transformer-sharp": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-in-viewport": "^1.0.0-alpha.16",
"react-reveal-text": "^0.1.1",
"react-spring": "^8.0.27",
"react-text-loop": "^2.3.0"
},
"devDependencies": {
"prettier": "2.2.1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
EDIT:
I should point out that when I go that location in cache that's mentioned in the error, there really is no webpack folder, nor output.js - so it really isn't being generated when I run gatsby develop, I just can't understand why.
I've also tried making a new project by cloning the offical gatsby mdx starter template, and that is working just fine out of the box.
I have existing React Apps which are published to production web servers but I want to run them from the desktop using Electron. However, I do not want to disturb the React App package.json. I attempted to decouple an existing online tutorial by paachu on Medium but was unsuccessful. It kept failing trying to locate "main...chunk.css" and other resources needed by the React App.
With that said, I have a working React App in directory ./projx/reactApp I would like to create an Electron App in ./projx/electronApp that will build and create a packaged executable using electron-builder. The dev environment is not necessary at this time in that I only need a release package to distribute. Here is a package.json that almost works:
{
"name": "wrappedReact",
"version": "1.0.0",
"main": "./src/electron.js",
"scripts": {
"preclean": "cross-env rm -rf build",
"react-prebuild": "cross-env cp -r ../reactApp/build build",
"build-tsapp": "tsc ./src/electron.ts",
"electron-prebuild": "mv ./src/*.js ../build",
"electron-build": "npm run electron-prebuild && electron-builder",
"build": "npm run preclean && npm run electron-build",
"startdev": "concurrently \"tsc ./src/electron.ts -w\" \"cross-env
NODE_ENV=dev nodemon --exec \"\"wait-on http://localhost:3000 &&
electron src/electron.js\"\""
},
"author": "sfanjoy",
"homepage": "./",
"electron-pack": "build --em.main=build/electron.js",
"build": {
"appId": "com.example.reactApp",
"productName": "ReactApp",
"copyright": "Copyright © 2019 sfanjoy",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "portable",
"icon": "assets/app.ico"
}
},
"dependencies": {
"#types/electron": "^1.6.10"
},
"devDependencies": {
"#types/electron": "^1.6.10",
"concurrently": "^4.1.1",
"cross-env": "^5.2.1",
"electron-builder": "^21.2.0",
"electron-is-dev": "^1.1.0",
"nodemon": "^1.19.1",
"typescript": "^3.5.2",
"wait-on": "^3.2.0"
}
}
I think the solution is with electron-builder if it would allow you to inject the ./src/electron.js into the prebuilt reactApp\dist\win-unpacked\resources\app.asar. I could then copy the reactApp/build directory, inject into the asar, and call electron-builder.
This by far (IMO) is the best starting setup (Boilerplate) I have come accross:
https://github.com/nateshmbhat/electron-react-ts-starter/
What changes do I have to make inorder to actually run a successful build and host my website on bluemix?
Right now, this is my Gruntfile.js, manifest.yml and package.json. The base folder 'app' is an Angular application -
module.exports = function(grunt){
grunt.initConfig({
connect: {
server: {
options: {
port: 9000,
base: 'app',
keepalive: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect']);
};
package.json:
{
"name": "dummy",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {"grunt-cli": "^1.2.0",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.10.1"
}
}
manifest.yml:
---
applications: #Reference http://docs.cloudfoundry.com/docs/using/deploying-apps/manifest.html
- name: dummy #Application Name. Unique to the user's Space
memory: 256M #The maximum memory to allocate to each application instance
instances: 1 #The number of instances of the application to start
path: ./ #Path to the application to be pushed
command: npm install && node_modules/.bin/grunt serve #The command to use to start the application
Few suggestions when working with node applications and Bluemix:
To start a node application it's recommended to use npm start and specify the script in the package.json.
If your application needs to build assets, specify how to do that in the postinstall script in the package.json. For example if you are using Gulp and your main task is build you will have something like:
"postinstall": "gulp build"
When running in Bluemix VCAP_APP_HOST and VCAP_APP_PORT will have the host and port where your application will run.
The files below have the fixes mentioned above:
manifest.yml:
---
applications:
- name: dummy-kartik-yadav
memory: 512M
instances: 1
path: .
command: npm start
package.json:
{
"name": "dummy",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node_modules/.bin/grunt serve",
"postinstall": "console.log('build ui assets like js, css, html...')"
},
"author": "",
"license": "ISC",
"dependencies": {
"grunt-cli": "^1.2.0",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.10.1"
}
}
gruntfile.js:
module.exports = function(grunt){
grunt.initConfig({
connect: {
server: {
options: {
port: process.env.VCAP_APP_PORT || 9000, # listen to the port that bluemix will assign you
base: 'app',
keepalive: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect']);
};
After doing the changes mentioned above, open the project folder and run npm start. If it works locally, it will in Bluemix.